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>

Your php is irrelevant to jQuery, and Javascript in general, please show the rendered html, not the server side script. — David Thomas, Apr 18 '12 at 15:03
Take a look here: http://api.jquery.com/live/, I think you are not getting the results because the elements are created before your javascript — , Apr 18 '12 at 15:04
@DavidThomas -- I've updated the question with the relevant code. — mrinterested, Apr 18 '12 at 15:23

score 6 · Answer 1 · answered Apr 18 '12 at 15:01

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>

score 2 · Answer 2 · answered Apr 18 '12 at 15:03

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

thank you for your answer. Unfortunately, it doesn't work. I've placed your code before and after, and my code after. None of them works. I'm on Firefox 11.0 under Ubuntu if that doesn't make any difference. — mrinterested, Apr 18 '12 at 15:16

score 0 · Answer 3 · answered Apr 18 '12 at 15:09

<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

score 0 · Answer 4 · answered Apr 18 '12 at 15:17

0

var selectAll = false;

    if(selectAll) {
        $('input:checkbox').removeAttr('checked');
        selectAll = false;
    }

    else {
        $('input:checkbox').attr('checked', 'checked');
        selectAll = true;
    }

answered Apr 18 '12 at 15:17

Tarun

1,888
3
18
30

score -1 · Answer 5 · answered Sep 10 '13 at 06:16

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.

Javascript and PHP - Check and Uncheck All Checkboxes

5 Answers5