使用 jQuery 选择所有复选框

发布于 2024-12-05 18:24:53 字数 741 浏览 1 评论 0原文

我只想在用户单击“全选”按钮时选中页面上的所有复选框。

在正文中：

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

任何人都可以告诉我我做错了什么吗？

原文

I simply want to check all of the check boxes on a page if a user clicks the "Select All" button.

In the body:

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

And the checkboxes are generated by a little bit of php:

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

Can anyone tell me what I'm doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

拒绝两难 2024-12-12 18:24:53

您不需要每个语句。只需选择所有复选框并设置属性 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');
    });
});

You dont need the each statement. Just select all checkboxes and set the property checked = true.

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

Note jQuery.prop() is a feature added to 1.6 and up. If you are on a version of jQuery prior to 1.6 you will need the following.

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

回复收藏 0 原文

萌能量女王 2024-12-12 18:24:53

与其选择带有标签名称的复选框，不如为其分配一些类并使用类名

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

php 代码选择它

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

Instead of selecting checkbox with tag name better assign it some class and select it with 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>';

回复收藏 0 原文

半夏半凉 2024-12-12 18:24:53

您只是错过了 .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!!!
    });
});

You just miss a }); for the .each(function(){} statement! There was no error else!

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

回复收藏 0 原文

踏月而来 2024-12-12 18:24:53

这会起作用，简短而方便的代码

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

This Will Work, Short and handy Code

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

回复收藏 0 原文

~没有更多了~