Check all checkboxes not working in wamp
Question
I was looking for check all checkboxes and found the answer but as i copied the code from fiddle demo to a normal html page and execute the code in WAMP server its not working.
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> check all</title>
<script type="text/javascript">
$('.chk_boxes').click(function(){
var chk = $(this).attr('checked')?true:false;
$('.chk_boxes1').attr('checked',chk);
});
</script>
</head>
<body>
<form>
<table>
<tr class="table_head_seperator">
<td class="grid_info" width="32px" bgcolor="#f6f6f6"><input type="checkbox" class="chk_boxes1" name="to_delete[<?PHP echo $entry['id'] ?>]" /></td>
<td class="grid_info" width="160px" bgcolor="#eeeeee"><span class="country_name">user name</span></td>
<td class="grid_info" width="130px" bgcolor="#eeeeee"><span class="country_name">date created</span></td>
<td class="grid_info" width="100px" bgcolor="#f6f6f6"><span class="country_name">username</span></td>
</tr>
<tr class="table_head_seperator">
<td class="grid_info" width="32px" bgcolor="#f6f6f6"><input type="checkbox" class="chk_boxes1" name="to_delete[<?PHP echo $entry['id'] ?>]" /></td>
<td class="grid_info" width="160px" bgcolor="#eeeeee"><span class="country_name">user name</span></td>
<td class="grid_info" width="130px" bgcolor="#eeeeee"><span class="country_name">date created</span></td>
<td class="grid_info" width="100px" bgcolor="#f6f6f6"><span class="country_name">username</span></td>
</tr><tr class="table_head_seperator">
<td class="grid_info" width="32px" bgcolor="#f6f6f6"><input type="checkbox" class="chk_boxes1" name="to_delete[<?PHP echo $entry['id'] ?>]" /></td>
<td class="grid_info" width="160px" bgcolor="#eeeeee"><span class="country_name">user name</span></td>
<td class="grid_info" width="130px" bgcolor="#eeeeee"><span class="country_name">date created</span></td>
<td class="grid_info" width="100px" bgcolor="#f6f6f6"><span class="country_name">username</span></td>
</tr>
</table>
<input type="checkbox" class="chk_boxes" label="check all" />check all
</form>
</body>
</html>
2 answers
solution1
1 2013-03-15 13:02:20
you need to include a jquery library for this to work
include just after the </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Example:
<title> check all</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('.chk_boxes').on('click',function(){
var chk = false;
if($(this).is(':checked'))
{
chk = true;
}
$('.chk_boxes1').attr('checked',chk);
});
});
</script>
solution2
1 ACCPTED 2013-03-15 13:11:23
This would seem simpler:
$('.chk_boxes').click(function(){
$('.chk_boxes1').prop('checked',$(this).prop('checked'));
});
Note that attr is NOT the same as prop
EDIT: now you probably also want to manage the click all one:(also enhanced to handle the problem of setting via code or some other way...using change not click event.
$('.chk_boxes').change(function () {
$('.chk_boxes1').prop('checked', $(this).prop('checked'));
});
$('.chk_boxes1').change(function () {
$('.chk_boxes').prop('checked', ($('.chk_boxes1').length == $('.chk_boxes1:checked').length) );
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.