勾选所有复选框

check all checkboxes

本文关键字：复选框      更新时间：2023-09-26

我有一个带有复选框的表，我想做"选中所有"answers"取消选中所有"复选框，但我找不到选中所有复选框的方法。

下面是我的代码: 
<form>
    <?php foreach ($this->entries as $entry): ?>
        <tr class="table_head_seperator">
            <td class="grid_info" width="32px" bgcolor="#f6f6f6"><input type="checkbox" class="chk_boxes1" name="to_delete[<?PHP echo $entry['id'] ?>]"  /></td>
            <td class="grid_info" width="160px" bgcolor="#eeeeee"><span class="country_name"><?php echo $entry['user_name'] ?></span></td>
            <td class="grid_info" width="130px" bgcolor="#eeeeee"><span class="country_name"><?php echo $entry['date_created'] ?></span></td>
            <td class="grid_info" width="100px" bgcolor="#f6f6f6"><span class="country_name"><?php echo $entry['user_type_name'] ?></span></td>
        </tr>
    <?PHP endforeach; ?>
    <input type="checkbox" class="chk_boxes" label="check all"  />check all
    <input type="checkbox" class="unchk_boxes"   /> un-check all
</form>
<script type="text/javascript">
    $(document).ready(function() {
        $('.chk_boxes').click(function(){
            $('.chk_boxes1').attr('checked',checked)
        })
    });
</script> 

$(function() {
    $('.chk_boxes').click(function() {
        $('.chk_boxes1').prop('checked', this.checked);
    });
});

这只影响check all框。但是为什么要使用两个复选框呢?一个选中所有，一个取消选中所有，但不是相互排斥的。这肯定会让用户感到困惑:)

尝试使用true|false。像这样:

$('.chk_boxes1').attr('checked',true);

附加备注:

此外，似乎你的取消和检查所有复选框是多余的。

<input type="checkbox" class="chk_boxes" label="check all"  />check all
<input type="checkbox" class="unchk_boxes"   /> un-check all

不需要这样做，您可以只使用一个复选框来同时完成这两个功能。因此，您的jQuery看起来像:

$(document).ready(function() {
    $('.chk_boxes').click(function(){
            $('.chk_boxes1').attr('checked',$(this).attr('checked'));
    })
});
与HTML: 

<input type="checkbox" class="chk_boxes" label="check all"  />check all

查看这里的工作解决方案http://jsfiddle.net/HBGzy/

你不需要使用"uncheck all"复选框:)

$('.chk_boxes').click(function(){
    var chk = $(this).attr('checked')?true:false;
    $('.chk_boxes1').attr('checked',chk);
});

你忘了引号:

$('.chk_boxes1').attr('checked','checked')

小提琴:http://jsfiddle.net/8ZHFn/

试试这个

 $(".chk_boxes").click(function()
   {
   var checked_status = this.checked;
   $(".chk_boxes1").each(function()
     {
      this.checked = checked_status;
     });
  });

因此，如果您想要在选中或取消选中类chk_boxes的复选框时影响的所有复选框的类名是chk_boxes1，这将获得所有元素并相应地设置选中的属性。

勾选取消选中所有复选框遵循下面的代码，它真的很简单，用下面的代码

在HTML表单中添加以下代码行 
<input type="checkbox" id='checkall' /> Select All

，然后添加以下脚本

     <script type='text/javascript'>
 $(document).ready(function(){
   // Check or Uncheck All checkboxes
   $("#checkall").change(function(){
     var checked = $(this).is(':checked');
     if(checked){
       $(".checkbox").each(function(){
         $(this).prop("checked",true);
       });
     }else{
       $(".checkbox").each(function(){
         $(this).prop("checked",false);
       });
     }
   });
 
  // Changing state of CheckAll checkbox 
  $(".checkbox").click(function(){
 
    if($(".checkbox").length == $(".checkbox:checked").length) {
      $("#checkall").prop("checked", true);
    } else {
      $("#checkall").removeAttr("checked");
    }
  });
});
</script>

请记住，脚本代码中的。checkbox是来自HTML表单

的其他复选框的类名。

例如，如果您有如下输入复选框

<input class="checkbox" name="emailid[]" type="checkbox" value="<?php echo $email;?>" />

我认为你应该使用true或false作为复选框属性

<script type="text/javascript" charset="utf-8">
$('document').ready( function() {
    $('.chk_boxes').click( function() {
        $(':checkbox').attr('checked',true);
    });
});
</script>

关于全选/取消全选的建议。我认为在勾选了全选之后，如果用户点击了任意一个复选框，则选中全选复选框应该是不选中的，也不点击全选框，如果用户一个一个选中了所有的复选框，则选中该复选框。所以我建议你在使用check all/uncheck all.

时尝试一下。
$(document).ready(function() {
    $('.chk_boxes').click(function(){
        $('.chk_boxes1').attr('checked',$(this).attr('checked'));
    })
    $('.chk_boxes1').click(function(){
        if($('.chk_boxes1').length == $('.chk_boxes1:checked').length)
              $('.chk_boxes').attr('checked',checked)
        else
             $('.chk_boxes').attr('checked',false)
    })
});
相关文章：