Select and Focus a Checkbox Input using Javascript

I have a checkbox which is auto-generated from php, which is used to filter out search results depending on state. Additionally, a user can select district too to filter out results. In case a person selects a particular district instead of state, i want to automatically select the right state for that district using JavaScript and be able to focus. How can i use JavaScript code to select any checkbox and focus on it using JavaScript? Any assistance is much appreciated.

JSFiddle

<li class="cp_state">
    <label class="title">State</label>
    <div class="handle close dashicons-before"></div>
        <div class="element">   
        <div class="scrollbox">
        <ol class="checkboxes">
            <li><input type="checkbox" name="cp_state[]" value="Johor"  />&nbsp;<label for="cp_state[]">Johor</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Kedah"  />&nbsp;<label for="cp_state[]">Kedah</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Kelantan"  />&nbsp;<label for="cp_state[]">Kelantan</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Wilayah Persekutuan Kuala Lumpur"  />&nbsp;<label for="cp_state[]">Wilayah Persekutuan Kuala Lumpur</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Wilayah Persekutuan Labuan"  />&nbsp;<label for="cp_state[]">Wilayah Persekutuan Labuan</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Melaka"  />&nbsp;<label for="cp_state[]">Melaka</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Negeri Sembilan"  />&nbsp;<label for="cp_state[]">Negeri Sembilan</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Pahang"  />&nbsp;<label for="cp_state[]">Pahang</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Wilayah Persekutuan Putra Jaya"  />&nbsp;<label for="cp_state[]">Wilayah Persekutuan Putra Jaya</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Perlis"  />&nbsp;<label for="cp_state[]">Perlis</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Pulau Pinang"  />&nbsp;<label for="cp_state[]">Pulau Pinang</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Perak"  />&nbsp;<label for="cp_state[]">Perak</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Sabah"  />&nbsp;<label for="cp_state[]">Sabah</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Selangor"  />&nbsp;<label for="cp_state[]">Selangor</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Sarawak"  />&nbsp;<label for="cp_state[]">Sarawak</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Terengganu"  />&nbsp;<label for="cp_state[]">Terengganu</label></li>
        </ol> <!-- #checkbox-wrap -->
        </div> <!-- #end scrollbox -->
        </div> <!-- #end element -->
    <div class="clr"></div>
</li>

JSFiddle

<li class="cp_state">
    <label class="title">State</label>
    <div class="handle close dashicons-before"></div>
        <div class="element">   
        <div class="scrollbox">
        <ol class="checkboxes">
            <li><input type="checkbox" name="cp_state[]" value="Johor"  />&nbsp;<label for="cp_state[]">Johor</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Kedah"  />&nbsp;<label for="cp_state[]">Kedah</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Kelantan"  />&nbsp;<label for="cp_state[]">Kelantan</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Wilayah Persekutuan Kuala Lumpur"  />&nbsp;<label for="cp_state[]">Wilayah Persekutuan Kuala Lumpur</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Wilayah Persekutuan Labuan"  />&nbsp;<label for="cp_state[]">Wilayah Persekutuan Labuan</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Melaka"  />&nbsp;<label for="cp_state[]">Melaka</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Negeri Sembilan"  />&nbsp;<label for="cp_state[]">Negeri Sembilan</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Pahang"  />&nbsp;<label for="cp_state[]">Pahang</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Wilayah Persekutuan Putra Jaya"  />&nbsp;<label for="cp_state[]">Wilayah Persekutuan Putra Jaya</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Perlis"  />&nbsp;<label for="cp_state[]">Perlis</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Pulau Pinang"  />&nbsp;<label for="cp_state[]">Pulau Pinang</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Perak"  />&nbsp;<label for="cp_state[]">Perak</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Sabah"  />&nbsp;<label for="cp_state[]">Sabah</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Selangor"  />&nbsp;<label for="cp_state[]">Selangor</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Sarawak"  />&nbsp;<label for="cp_state[]">Sarawak</label></li>
            <li><input type="checkbox" name="cp_state[]" value="Terengganu"  />&nbsp;<label for="cp_state[]">Terengganu</label></li>
        </ol> <!-- #checkbox-wrap -->
        </div> <!-- #end scrollbox -->
        </div> <!-- #end element -->
    <div class="clr"></div>
</li>

Share Improve this question edited Aug 13, 2017 at 10:49 asked Aug 13, 2017 at 10:35 Ibrahim Timimi 3,8005 gold badges30 silver badges44 bronze badges

1. you need to differentiate checkboxes by adding an unique id or class name to each of them; 2. you can use either document.getElementById or document.querySelector to locate the checkbox you want to manipulate; 3. use focus method or checked property to focus on it or check it. – tibetty Commented Aug 13, 2017 at 10:42
@Xihua Duan the checkbox is auto generated by php. My only chance to do it by using javascript, i can't alter php files cause i'm not familiar with the theme files. – Ibrahim Timimi Commented Aug 13, 2017 at 10:47
In this case, you have rewrite server code to add attribute to facilitate you implementing this very biz logic. – tibetty Commented Aug 13, 2017 at 10:48

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

When user chooses district you need to know which state are you looking for. Having that you can write simple function that iterates over a set of checkboxes and selects specific one based on the provided value. Every time a user selects the district you need to call function that toggles the checkboxes. Like this:

var checkboxes = document.querySelectorAll('input[type="checkbox"]')

function selectCheckboxWithValue(value) {
    checkboxes.forEach(function(checkbox) {
      if (checkbox.value === value) {
          checkbox.checked = true
          checkbox.focus()
      } else {
          checkbox.checked = false
      }
  })
}

// let's find checkbox with value "Kedah", select it and focus
selectCheckboxWithValue('Kedah')

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Select and Focus a Checkbox Input using Javascript - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)