考虑这个简单的示例代码:
<form name="text" id="frm1" method="post">
<input type="checkbox" name="name[]" value="1000"> Chk1<br>
<input type="checkbox" name="name[]" value="1001"> Chk2<br>
<input type="checkbox" name="name[]" value="1002"> Chk3<br>
<input type="checkbox" name="name[]" value="1003"> Chk4<br>
<input type="checkbox" id="select_all"/> Select All<br>
</form>
<form name="text" id="frm2" method="post">
<input type="checkbox" name="name[]" value="4000"> Chk1<br>
<input type="checkbox" name="name[]" value="4001"> Chk2<br>
<input type="checkbox" name="name[]" value="4002"> Chk3<br>
<input type="checkbox" name="name[]" value="4003"> Chk4<br>
<input type="checkbox" id="select_all"/> Select All<br>
我正在尝试让Select All在每个表单中工作(表单在我的生产代码中动态生成,并且具有不同的,不同的名称)
我正在使用这个jquery,但select_all仅适用于第一个表单;它对第一个下面的表格没有影响。
$('#select_all').change(function() {
var checkboxes = $(this).closest('form').find(':checkbox');
if($(this).is(':checked')) {
checkboxes.attr('checked', 'checked');
} else {
checkboxes.removeAttr('checked');
}
});
我无法弄清楚如何在表格ID中包含的任何:复选框中选中所有复选框。
有人能指出我正确的方向吗?
非常感谢
答案 0 :(得分:8)
您有多个具有相同ID的元素,这是无效的HTML并导致您看到的问题。将id="select_all"
更改为class="select_all"
,将$('#select_all')
更改为$('.select_all')
,您应该做得很好。
答案 1 :(得分:1)
您有两个ID为select_all
的元素;这是不允许的。将其更改为类并尝试此操作:
$('.select_all').change(function() {
var checkboxes = $(this).closest('form').find(':checkbox');
checkboxes.attr('checked', $(this).is(':checked'));
});
答案 2 :(得分:0)
ID是唯一的。你有两个。如果您需要多个元素,请使用class="select_all"
和$('.select_all')
答案 3 :(得分:0)
$('#select_all').click(function() {
$("input:checkbox", $(this).closest('form')).attr("checked", this.checked)
});
但是,您只需要一个标识为select_all
的项目即可。如果您可以更改为select_all
的班级,那么只需将#
替换为.
,就可以了。
答案 4 :(得分:0)
试试这个:
$("#select_all").click(function()
{
var checked_status = this.checked;
$("input[@name=name]").each(function()
{
this.checked = checked_status;
});
});
答案 5 :(得分:0)
您不能拥有两个具有相同ID的项目。 example
HTML:
<form name="text" id="frm1" method="post">
<input type="checkbox" name="name[]" value="1000"> Chk1<br>
<input type="checkbox" name="name[]" value="1001"> Chk2<br>
<input type="checkbox" name="name[]" value="1002"> Chk3<br>
<input type="checkbox" name="name[]" value="1003"> Chk4<br>
<input type="checkbox" id="select_all_1"/> Select All<br>
</form>
<form name="text" id="frm2" method="post">
<input type="checkbox" name="name[]" value="4000"> Chk1<br>
<input type="checkbox" name="name[]" value="4001"> Chk2<br>
<input type="checkbox" name="name[]" value="4002"> Chk3<br>
<input type="checkbox" name="name[]" value="4003"> Chk4<br>
<input type="checkbox" id="select_all_2"/> Select All<br>
</form>
JS:
$(function() {
$('#select_all_1, #select_all_2').bind('click', function(event) {
var
ref = this,
refChecked = this.checked;
$(this.form).find('input[type="checkbox"]').each(function(i, el) {
if(this != ref)
this.checked = refChecked;
});
});
});