Javascript 选中所有复选框

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6689861/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 22:49:47  来源:igfitidea点击:

check all checkboxes

phpjavascriptjquerycheckbox

提问by haider

I have a table with checkboxes and I want to do the "check all" and "un-check all" checkboxes but I could not find the way to check all the checkboxes.

我有一张带有复选框的表格,我想勾选“全部选中”和“取消全部选中”复选框,但我找不到检查所有复选框的方法。

Here is my code:

这是我的代码:

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

回答by jensgram

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

This only affects the check allbox. Butwhy would you want to use two checkboxes anyway? One to check all and one to uncheck all, but not mutually exclusive. That's got to be the recipe to confuse users :)

这只影响check all盒子。但是你为什么要使用两个复选框呢?一个选中所有,一个取消选中所有,但不相互排斥。这一定是迷惑用户的秘诀:)

回答by Carls Jr.

See the working solution here http://jsfiddle.net/HBGzy/

在此处查看工作解决方案http://jsfiddle.net/HBGzy/

you don't need to use the "uncheck all" checkbox :)

您不需要使用“取消选中所有”复选框:)

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

回答by Alex R.

Try using true|false. Like so:

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

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

Additional comment:

补充评论:

In addition, it appears your un- and check all checkboxes are redundant.

此外,您的 un- 和 check 所有复选框似乎都是多余的。

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

Rather than doing that, you can just have one checkbox that does both. Thus, your jQuery will look like:

而不是这样做,你可以只用一个复选框来做这两项。因此,您的 jQuery 将如下所示:

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

With HTML:

使用 HTML:

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

回答by Igor Dymov

You forgot about quotes:

你忘记了报价:

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

fiddle: http://jsfiddle.net/8ZHFn/

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

回答by Balanivash

Try this

尝试这个

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

So, if the class name of all the checkboxes you want to affect when checking or unchecking the checkbox with class chk_boxes,is chk_boxes1this will get all the elements and set the checked property accordingly.

因此,如果在选中或取消选中带有 class 的复选框时要影响的所有复选框的类名chk_boxeschk_boxes1这将获取所有元素并相应地设置选中的属性。

回答by microspino

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

回答by Sedat Ba?ar

An advice about check all/uncheck all.. As my think after selecting check all, if user clicks any of checkbox1s, the check all checkbox should be unchecked and also without clicking check all box, if user selects all checkbox1s one by one the checkbox should be selected. So i suggest you to try this when using check all/uncheck all..

关于全选/取消全选的建议。正如我在选择全选后的想法一样,如果用户单击任何一个复选框,则应取消选中所有复选框,并且也不要单击全选框,如果用户一个个选中所有复选框,则复选框应该被选中。所以我建议你在使用 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)
    })
});

回答by Andha

i think you should use the true or false for the checkbox attribute.

我认为您应该对复选框属性使用 true 或 false。