我有这个样本:
代码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;
});
}
});
我想要做的是当选中“全选”按钮时,选择一个框中的所有字段。
此时,设置所有输入......我只希望当前的框。
如何更改我的功能以使其有效?
提前致谢!
答案 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;
});
}
});
您也可以像这样减少代码,
$('.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);
});