选中所有chekbox时选择一个复选框

时间:2015-12-23 04:18:08

标签: javascript php jquery checkbox

我正在寻找逻辑,其中我使用php获取while循环中的一些数据列表,如下所示。

  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>';
  }

现在由于我们有多个复选框,如果检索到多个数据,我还有一个复选框,

<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>

我感到困惑的是,如果我选中所有检索到的数据复选框,则应自动选中单独的复选框,即如果从检索到的10个数据中选择了5个数据,则不应选中id="checkAll"的复选框。相反,如果我选中所有10个复选框,则只应选择具有id="checkAll"的特定复选框。

1 个答案:

答案 0 :(得分:1)

收听change的{​​{1}}事件以及checkboxes lengthchecked复选框与length个复选框的checkbox1匹配check check all复选框。{/ p>

试试这个:

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

$('#checkAll').on('change', function() {
  $('.checkbox1').prop('checked', this.checked);
});
&#13;
<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="">
&#13;
&#13;
&#13;

Fiddle here