CODEWITHSUNDEEP
phpjavascriptjquerycheckbox
mrinterested
mrinterested

Reputation: 155

Javascript and PHP - Check and Uncheck All Checkboxes

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>

Upvotes: 0

Views: 9248

Answers (5)

user2593560
user2593560

Reputation: 162

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.

Upvotes: -1

Tarun
Tarun

Reputation: 1898

var selectAll = false;

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

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

Upvotes: 0

user745235
user745235

Reputation: 

<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

Upvotes: 0

Vahid Chakoshy
Vahid Chakoshy

Reputation: 1527

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

Upvotes: 2

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

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>

Upvotes: 7

Related Questions