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

Question

I have this sample:

link

CODE 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;
             });
         }
     });

What I want to do is that when the button "select-all" is checked, select all fields in a box.

At this time, set all inputs ... and I wish only the current box.

How can I change my function so that it works?

Thanks in advance!

Answer 1

You can use .closest() to find the parent div, then use .find() method to get the checkboxes inside it,

$('.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

You can reduce your code like this also,

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

As A.Wolf suggested, you can use like this too,

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