Question

如果用户点击“全选”按钮，我只想检查页面上的所有复选框。

身体：

<button id="checkall">Select All</button>

jQuery的：

<head>

    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        $('#checkall').click(function () {
            $("input[type=checkbox]").each( function() {
            $(this).attr('checked', true);
        });
    });
    </script>
</head>

复选框是由一些php生成的：

echo '<li>';
echo '<input type="checkbox" name="checkbox[]" value="'.$x.'" />'.$x.'<br/>';
echo '</li>';

谁能告诉我我做错了什么？

Answer 1

你不需要每个声明。只需选中所有复选框并设置属性checked = true。

$(document).ready(function(){
    $('#checkall').click(function () {
        $("input:checkbox").prop('checked', true);
    });
});

注意jQuery.prop()是添加到1.6及更高版本的功能。如果您使用的是1.6之前的jQuery版本，则需要以下内容。

$(document).ready(function(){
    $('#checkall').click(function () {
        $("input:checkbox").attr('checked','checked');
    });
});

Answer 2

不要选择带有标签名称的复选框，而是更好地为其分配一些类，并使用classname

选择它

  $(document).ready(function(){
      $('#checkall').click(function () {
           $(".checkbox").each( function(i,chkbox) {
             $(chkbox).attr('checked', true);
      });
     });
   });

php code

                 echo '<li>';
                echo '<input type="checkbox" class="checkbox" name="checkbox[]" value="'.$x.'" />'.$x.'<br/>';
                echo '</li>';

Answer 3

});声明只是错过了.each(function(){}！其他没有错误！

$(document).ready(function () {
    $('#checkall').click(function () {
        $("input[type=checkbox]").each(function () {
            $(this).attr('checked', 'checked');
            // or 
            // $(this).attr('checked', true);
        }); // you missed this one!!!
    });
});

Answer 4

这将工作，简短而便捷的代码

<script>
    $('#check_all').click(function () {
    $( this ).closest('form').find(':checkbox').prop( 'checked' , this.checked ? true : false );
})
</script>

使用jQuery选中所有复选框

4 个答案: