我想制作复选框来检查所有子复选框。
我的复选框:
<table width="30%" class="table striped hovered cell-hovered border bordered">
<tr valign="middle">
<td><b>IDPEL</b></td>
<td><b>No. Baris</b></td>
<td><b><input type="checkbox" id="pilihsemua"/> Pilih Semua</b></td>
</tr>
<?php
foreach ($panel_error as $key) {
echo"<tr><td>".$key->errpanel."</td>";
echo"<td>".$key->nomorBaris."</td>";
echo"<td>";
echo form_checkbox('chk_boxes1[]',$key->errpanel);
echo"</td></tr>";
}
?>
</table>
这是我的脚本:
<script type="text/javascript">
$(document).ready(function () {
$('.chk_boxes').click(function(){
$('.chk_boxes1').attr('checked',checked)
})
$('#table1').dataTable();
$('#table2').dataTable();
//checkbox
$("#pilihsemua").click(function () { // If #pilihsemua checked, all checkbox will be checked.
$('.chk_boxes1[]').attr('checked', checked);
});
// if all sub checkboxes are being checked, #pilihsemua will automatically checked.
$(".chk_boxes1[]").click(function(){
if($(".chk_boxes1[]").length == $(".chk_boxes1[]:checked").length) {
$("#pilihsemua").attr("checked", "checked");
} else {
$("#pilihsemua").removeAttr("checked");
}
});
//end of checkbox
});
</script>
但是,我仍然不知道为什么,这不可能是工作。我尝试检查 #pilihsemua 但没有检查所有子类。或者,如果我检查了所有子类,则 #pilihsemuadoesn 也不会检查。
也许它接近于此:
但是这个剧本有一些缺陷。只是试着找出问题所在。
例:网页代码
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<table width="30%" cellspacing="1" cellpadding="1" border="collapse">
<tr>
<td><b><input type="checkbox" class="group" chk="g1"/> Pilih Semua</b></td>
<td><b><input type="checkbox" class="group" chk="g2"/> Pilih Semua</b></td>
<td><b><input type="checkbox" class="group" chk="g3"/> Pilih Semua</b></td>
</tr>
<tr>
<td>
<input type="checkbox" class="g1"/>
<input type="checkbox" class="g1"/>
<input type="checkbox" class="g1"/>
</td>
<td>
<input type="checkbox" class="g2"/>
<input type="checkbox" class="g2"/>
<input type="checkbox" class="g2"/>
</td>
<td>
<input type="checkbox" class="g3"/>
<input type="checkbox" class="g3"/>
<input type="checkbox" class="g3"/>
</td>
</tr>
</table>
脚本:Jquery
$(function(){
$(".group").click(function(){
var click = $(this).attr('chk');
var current = $("."+click).attr('checked');
if(current){
$("."+click).removeAttr('checked');
}else{
$("."+click).attr('checked','checked');
}
})
})
看看这个真实的模拟