使用 Javascript 选择并聚焦复选框输入答案

【问题标题】：Select and Focus a Checkbox Input using Javascript使用 Javascript 选择并聚焦复选框输入
【发布时间】：2018-01-21 09:38:41
【问题描述】：

我有一个 checkbox，它是从 php 自动生成的，用于根据状态过滤掉搜索结果。此外，用户也可以选择地区以过滤掉结果。如果有人选择特定地区而不是州，我想使用 JavaScript 自动为该地区选择正确的州并能够集中注意力。如何使用 JavaScript 代码选择任何复选框并使用 JavaScript聚焦？非常感谢任何帮助。

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>

【问题讨论】：

1.您需要通过为每个复选框添加唯一的 id 或类名来区分复选框； 2. 您可以使用 document.getElementById 或 document.querySelector 来定位您要操作的复选框； 3.使用focus方法或checked属性对其进行对焦或检查。
@Xihua Duan 复选框是php自动生成的。我唯一的机会是使用 javascript，因为我不熟悉主题文件，所以我无法更改 php 文件。
在这种情况下，您必须重写服务器代码以添加属性以方便您实现这个非常商业逻辑。

标签： javascript select checkbox focus

【解决方案1】：

当用户选择地区时，您需要知道您在寻找哪个州。有了它，您可以编写简单的函数来迭代一组复选框并根据提供的值选择特定的一个。每次用户选择区域时，您需要调用切换复选框的功能。像这样：

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')

【讨论】：