javascript - 如何从一个框中选择所有字段？

Question

我有这个样本:

link

代码 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>

代码 CSS:

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

代码 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);
});