CODEWITHSUNDEEP
javascriptphpjquerycheckbox
Jijo Nair
Jijo Nair

Reputation: 838

Select one Checkbox When All chekboxes are selected

I am looking for the logic where I have the list of some data in while loop fetched using php just as below.

  if (mysql_num_rows($results) != 0) {
      // displaying records.
      while ($row = mysql_fetch_array($results)) {
          echo '<div id="checkboxlist">';
          echo '<tr>';
          echo '<td><input name="checkbox[]" type="checkbox" class="checkbox1" value="'.$row['Id'].'" id="Checkbox1"></td>';
          echo '<td>'.$row['first_name'].'</td>';
          echo '<td>'.$row['last_name'].'</td>';
          echo '<td>'.$row['phone'].'</th>';
          echo '<td>'.$row['email'].'</td>';
          echo '<td>'.$row['fax'].'</td>';
          echo '<td><button><a href="edit.php?id='.$row['Id'].'">Edit</a></button></td>';
          echo '<td><a onclick="return deleteRec();" href="ajax_delete.php?id='.$row['Id'].'" id="deleteOne">Delete</a></td>';
          echo '<td><a href="view.php?id='.$row['Id'].'" target="_blank">View</a></td>';

          echo '</div>';
      }
  } else {
      echo '<td colspan="9"><h1>No contacts found.</td></h1>';
  }

Now As we have more than one checkbox if multiple data are retrieved , I have one more checkbox, 

<table>
    <tr>
        <td>              
            <input type="checkbox" name="checkAll" id="checkAll"/>
        </td>
        <td colspan="8" align="right">
            <button type="submit" onClick="return massDelete()" name="delete" class="delete" disabled>Delete All</button>
        </td>
    </tr>
</table>

I am confused that , if I select all the data retrieved checkboxes , the lone check box should automatically selected, i.e If 5 datas are selected out of 10 retrieved, that the checkbox with id="checkAll" should not be selected. Instead if I select all the 10 checkbox, only than that particular checkbox with id="checkAll" should be selected.

Upvotes: 0

Views: 728

Answers (1)

Rayon
Rayon

Reputation: 36609

Listen change event of the checkboxes and if length of checked checkboxes matches with the length of the checkboxes having class checkbox1 then check the check all checkbox.

Try this:

$('.checkbox1').on('change', function() {
  var bool = $('.checkbox1:checked').length === $('.checkbox1').length;
  $('#checkAll').prop('checked', bool);
});

$('#checkAll').on('change', function() {
  $('.checkbox1').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" name="checkAll" id="checkAll" />Check all
<br>
<input name="checkbox[]" type="checkbox" class="checkbox1" value="">
<br>
<input name="checkbox[]" type="checkbox" class="checkbox1" value="">
<br>
<input name="checkbox[]" type="checkbox" class="checkbox1" value="">
<br>
<input name="checkbox[]" type="checkbox" class="checkbox1" value="">

Fiddle here

Upvotes: 1

Related Questions