jQuery使用prop设置checkbox全选、反选

最新推荐文章于 2024-12-30 17:57:28 发布

原创最新推荐文章于 2024-12-30 17:57:28 发布 · 611 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #checkbox

笔记之类的同时被 2 个专栏收录

77 篇文章

订阅专栏

JQuery

4 篇文章

订阅专栏

本文介绍如何使用jQuery实现网页中复选框的全选与反选功能。通过简单的JavaScript代码片段，可以轻松地为用户提供全选所有复选框或反选已选择项的功能。该方法适用于列表操作和表单处理等场景。

$(document).ready(function(){
           $("#allsel").click(function(){
           /*
               var is = $(this).attr("checked");
               if(is=="checked"){
               $("table :checkedbox").attr("checked",true);
               }
           */
           //prop
           var is =$(this).prop("checked");
           $("table :checkbox").prop("checked",is);

           });


           $("#notsel").click(function(){
               $("table :checkbox").prop("checked",function(index,attr){
                   return !attr;

               });

           }

           );

});

$(function(){
    var checkbox = $("input[type='checkbox']");
    //全选
    $('#select-all').click(function(){
        checkbox.attr('checked', true);
    });

    //反选
    $('#select-reverse').click(function(){
        checkbox.each(function(i, dom){
            if ( $(dom).attr('checked') ) {
                $(dom).removeAttr('checked');
            } else {
                $(dom).attr('checked', 'checked');
            }
        });
    });
});