Javascript and PHP - Check and Uncheck All Checkboxes
Question
I've studied all the answers here ( https://stackoverflow.com/a/2191026 ), but even the clearest code suggested by @davydepauw and @emeraldjava don't work... The below code doesn't select/unselect the boxes present in the PHP code.
echo "<form action=$fileName method='post'>";
...
<script language='JavaScript'>
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
}
else {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = false;
});
}
});
</script>";
...
// This should select/deselect all checkboxes below:
echo "<input type='checkbox' name='select-all' id='select-all' />";
...
// The below is in the WHILE loop fetching data from MySQL:
echo "<input type='checkbox' name='IndustryID' value='" . $row['IndustryID'] . "'>";
...
</form>
For @DavidThomas request, below is the rendered code:
<body>
<script language='JavaScript'>
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
}
else {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = false;
});
}
});
</script>
...
<form action=XXX.php method='post'>
...
<input type='checkbox' name='select-all' id='select-all' />
...
<input type='checkbox' name='IndustryID' value='3'>
...
<input type='checkbox' name='IndustryID' value='5'>
...
<input type='checkbox' name='IndustryID' value='148'>
...
</form>
</body>
5 answers
solution1
6 2012-04-18 15:01:39
You must put everything inside a document.ready event like this otherwise the code is run when the element are not present and there is no element to attach to and use the correct script tag
<script type="text/javascript">
$(function(){
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
}
else {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = false;
});
}
});
})
</script>
solution2
2 2012-04-18 15:03:27
that is because you add check box after jquery code.
change your javascript code to this
<script language='JavaScript'>
$(document).ready(function(){
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
}
else {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = false;
});
}
});
});
</script>";
or add your javascript after displaying checkbox
solution3
0 2012-04-18 15:09:23
<script type="text/javascript">
$(function(){
$('#select-all').click(function(event) {
$(':checkbox').each(function() {
$(this).attr('checked', !checkbox.attr('checked'));
});
});
})
</script>
Not tested at all...just came to my mind
solution4
0 2012-04-18 15:17:38
var selectAll = false;
if(selectAll) {
$('input:checkbox').removeAttr('checked');
selectAll = false;
}
else {
$('input:checkbox').attr('checked', 'checked');
selectAll = true;
}
solution5
-1 2013-09-10 06:16:09
You cant use this..
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if(!$(".case:not(:checked)").length)
{
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
Then this is how i construct my PHP..
<input type='checkbox' id='selectall'/>
$select = mysql_query ("SELECT * FROM tblname") OR DIE (mysql_error());
while ($row3=mysql_fetch_array($select_orders2)){
$idd = $row3['id'];
<input type='checkbox' class='case' name='checkbox[]' value='".$idd."'>
}
In this code. all the data retrieved by sql will iterate with the class case. hope this will help.
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.