Question

我有一个表单字段，其中有两个字段，一个包含国家/地区，另一个包含成员资格，并且都有复选框。问题是，我使用的代码选择所有国家/地区（选中/取消选中国家/地区的所有复选框）也会检查或取消选中成员资格字段。我想区分这两者，以便我只检查国家而不是会员字段中的复选框。

以下是我正在使用的代码：

$("#checkCountries").click(function(){
  $('input:checkbox').not(this).prop('checked', this.checked);
});

编辑：HTML PART

<tr>
   <th>Target Memberships</th>
   <td>
      <div class="target-memberships col-sm-8">
      <input type="checkbox" value="1" name="memberships[]" checked> Standard<br>
      <input type="checkbox" value="2" name="memberships[]" checked> Premium<br>
      <input type="checkbox" value="3" name="memberships[]" checked> Elite<br>
      </div>
   </td>
</tr>
<tr>
   <th>Target Countries</th>
   <td>
       <input type="checkbox" id="checkCountries" checked> Select All<br>
       <div class="target-countries col-sm-8">
         <input type="checkbox" name="country[]" id="country" value="Afghanistan" checked> Afghanistan<br>
         <input type="checkbox" name="country[]" id="country" value="Albania" checked> Albania<br>
         <input type="checkbox" name="country[]" id="country" value="Algeria" checked> Algeria<br>
         <input type="checkbox" name="country[]" id="country" value="American Samoa" checked> American Samoa<br>
         <input type="checkbox" name="country[]" id="country" value="Andorra" checked> Andorra<br>
         <input type="checkbox" name="country[]" id="country" value="Angola" checked> Angola<br>
       </div>
   </td>
</tr>

在这里，input:checkbox使代码可以处理页面中的所有复选框。我想我需要改变它，使其专门针对特定领域（国家）。请帮忙。

Answer 1

如果你的HTML是这样的：

<input type="checkbox" id="checkCountries" checked="checked"> Select All<br>
<div class="target-countries col-sm-8">
  <input type="checkbox" name="country[]" id="country-1" value="Afghanistan" checked="checked" /> Afghanistan<br>
  <input type="checkbox" name="country[]" id="country-2" value="Albania"  checked="checked" /> Albania<br>
  <input type="checkbox" name="country[]" id="country-3" value="Algeria"  checked="checked" /> Algeria<br>
  <input type="checkbox" name="country[]" id="country-4" value="American Samoa" checked="checked" /> American Samoa<br>
  <input type="checkbox" name="country[]" id="country-5" value="Andorra"  checked="checked" /> Andorra<br>
  <input type="checkbox" name="country[]" id="country-6" value="Angola"  checked="checked" /> Angola<br>
 </div>

在HTML中，每个id必须是唯一的。 name可以与定义数组相同：country[]，但id必须对每个元素都是唯一的。由于input没有结束标记，因此最好将其添加到标记的末尾，例如<input type="checkbox" />。

您可以使用：

$("#checkCountries").click(function(){
  $(".target-countries input[type='checkbox']").prop("checked", $(this).prop("checked"));
});

这会将类选择器target-countries和input元素定位为类型checkbox。然后，它会将属性checked设置为与当前复选框的值匹配。

工作片段：

＆＃13;

$(function() {
  $("#checkCountries").click(function() {
    $(".target-countries input[type='checkbox']").prop("checked", $(this).prop("checked"));
  });
});

＆＃13;

.target-countries {
  margin: 3px;
  border: 1px solid #CCC;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkCountries" checked="checked"> Select All<br>
<div class="target-countries col-sm-8">
  <input type="checkbox" name="country[]" id="country-1" value="Afghanistan" checked="checked" /> Afghanistan<br>
  <input type="checkbox" name="country[]" id="country-2" value="Albania" checked="checked" /> Albania<br>
  <input type="checkbox" name="country[]" id="country-3" value="Algeria" checked="checked" /> Algeria<br>
  <input type="checkbox" name="country[]" id="country-4" value="American Samoa" checked="checked" /> American Samoa<br>
  <input type="checkbox" name="country[]" id="country-5" value="Andorra" checked="checked" /> Andorra<br>
  <input type="checkbox" name="country[]" id="country-6" value="Angola" checked="checked" /> Angola<br>
</div>

＆＃13;

希望有所帮助。

复选框检查全部无效

1 个答案: