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
– David Thomas, Commented Apr 18, 2012 at 15:03
Take a look here: api.jquery.com/live, I think you are not getting the results because the elements are created before your javascript — user745235
– user745235, Commented Apr 18, 2012 at 15:04
@DavidThomas -- I've updated the question with the relevant code. — mrinterested
– mrinterested, Commented Apr 18, 2012 at 15:23

Nicola Peluchetti · Accepted Answer · 2012-04-18 15:01:39Z

7

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>

answered Apr 18, 2012 at 15:01

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vahid CH · Accepted Answer · 2012-04-18 15:03:27Z

2

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

answered Apr 18, 2012 at 15:03

Vahid CH

1,52715 silver badges27 bronze badges

1 Comment

mrinterested Over a year ago

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.

user745235 · Accepted Answer · 2012-04-18 15:09:23Z

0

<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

answered Apr 18, 2012 at 15:09

user745235

Comments

Tarun · Accepted Answer · 2012-04-18 15:17:38Z

0

var selectAll = false;

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

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

answered Apr 18, 2012 at 15:17

Tarun

1,9084 gold badges19 silver badges31 bronze badges

Comments

user2593560 · Accepted Answer · 2013-09-10 06:16:09Z

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.

Collectives™ on Stack Overflow

Javascript and PHP - Check and Uncheck All Checkboxes

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related