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

时间:2016-03-03 13:19:12

标签: javascript jquery html css

我有这个样本:

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>

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

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

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

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

提前致谢!

1 个答案:

答案 0 :(得分: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);
});