You can simply check/uncheck all checkboxes with this function:
$("#flowcheckall").click(function () {
$('#flow-table tbody input[type="checkbox"]').prop('checked', this.checked);
});
Вопрос
I have implemented one example of data table. When i click on "all" checkbox in data table header its check and unchecked only once. Second time it not able to check all checkbox in table body. My code is following:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.0-beta.1/js/jquery.dataTables.js"></script>
<link href="http://cdn.datatables.net/1.10.0-beta.1/css/jquery.dataTables.css" rel="stylesheet">
</head>
<body>
<h1>DataTable Checkbox</h1>
<table class="display dataTable" id="flow-table">
<thead>
<th class="check">
<input type="checkbox" id="flowcheckall" value=""> All</input>
</th>
<th>Name</th>
<!-- <th>Cookie</th> -->
<th>Priority</th>
</thead>
<tbody>
</tbody>
</table>
</body>
<script>
$(document).ready(function () {
var str = "";
for (i = 0; i < 25; i++) {
a = i + 1;
str += "<tr><td><input type='checkbox' id='checkall' name='mydata' value=" + a + "></td><td>a" + a + "</td><td>name" + a + "</td></tr>";
}
$("#flow-table > tbody").append(str);
oTableStaticFlow = $('#flow-table').dataTable({
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}],
});
$("#flowcheckall").click(function () {
if (this.checked) {
//alert("checked");
//$('input', oTable.fnGetNodes()).attr('checked',this.checked);
$('#flow-table tbody input[type="checkbox"]').attr('checked', true);
} else {
//alert("unchecked");
$('#flow-table tbody input[type="checkbox"]').attr('checked', false);
}
});
});
</script>
</html>
Anybody help me..!
Решение
You can simply check/uncheck all checkboxes with this function:
$("#flowcheckall").click(function () {
$('#flow-table tbody input[type="checkbox"]').prop('checked', this.checked);
});
Другие советы
Remove this js call
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
I tested it and it worked fine after removing this. Reason must be because the other 2 you called are version 1.10.0-beta.1 and must have conflicted with the jquery-1.10.1.min.js you were calling.
<input type='checkbox' class="sel_users" value='Anil'>Anil</option>
<input type='checkbox' class="sel_users" value='Amit'>Amit</option>
<input type='checkbox' class="sel_users" value='Mayank'>Mayank</option>
<input type='checkbox' class="sel_users" value='Sonarika'>Sonarika</option>
<input type='checkbox' class="sel_users" value='Vishal'>Vishal</option>
<input type='checkbox' class="sel_users" value='Yogesh'>Yogesh</option>
<input type='checkbox' id='checkallusers' class="checkallusers">Select All
$("#checkallusers").change(function(){
var checked = $(this).is(':checked');
// Select all
if(checked){
$('.sel_users').each(function() {
$(this).prop('checked',true);
});
}else{
// Deselect All
$('.sel_users').each(function() {
$(this).prop('checked',false);
});
}
});