Question

我有这个样本：

代码HTML：

<div class="box1">
  <fieldset>
  <input type="checkbox" class="select-all">
  <label>Select All </label>
  </fieldset>

  <fieldset>
  <input type="checkbox">
  <label>Checkbox1</label>
  </fieldset>

  <fieldset>
  <input type="checkbox">
  <label>Checkbox3 </label>
  </fieldset>

  <fieldset>
  <input type="checkbox">
  <label>Checkbox3 </label>
  </fieldset>

</div>

<div class="box2">
  <fieldset>
  <input type="checkbox" class="select-all">
  <label>Select All </label>
  </fieldset>
  <fieldset>
  <input type="checkbox">
  <label>Checkbox4 </label>
  </fieldset>
  <fieldset>
  <input type="checkbox">
  <label>Checkbox5 </label>
  </fieldset>
  <fieldset>
  <input type="checkbox">
  <label>Checkbox6 </label>
  </fieldset>
</div>

CODE CSS：

.box1{
  background:#d9d9d9;
  margin-bottom:20px;
}
.box2{
  background:#ccc;
}

CODE JS：

$('.select-all').click(function(event) {
         if(this.checked) {
             // Iterate each checkbox
             $(':checkbox').each(function() {
                 this.checked = true;
             });
         }else{
             $(':checkbox').each(function() {
                 this.checked = false;
             });
         }
     });

我想要做的是当选中“全选”按钮时，选择一个框中的所有字段。

此时，设置所有输入......我只希望当前的框。

如何更改我的功能以使其有效？

提前致谢！

Answer 1

您可以使用.closest()查找父div，然后使用.find()方法获取其中的复选框，

$('.select-all').click(function(event) {
  if (this.checked) {
    // Iterate each checkbox
    $(this).closest("div").find(':checkbox').each(function() {
      this.checked = true;
    });
  } else {
    $(this).closest("div").find(':checkbox').each(function() {
      this.checked = false;
    });
  }
});

Demo

您也可以像这样减少代码，

$('.select-all').click(function(event) {
  var obj=this;
  var parent = $(this).closest("div[class^=box]");
  parent.find(':checkbox').each(function() {
    this.checked = obj.checked;
  });
});

正如A.Wolf建议的那样，你也可以这样使用，

 $('.select-all').change(function(event) {
  $(this).closest('div[class^=box]').find(':checkbox').prop('checked', this.checked);
});

如何从一个盒子中选择所有字段？

1 个答案: