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

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

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

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery #全选 #checkbox

JQuery 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用jQuery实现HTML页面中输入框的全选与反选功能，包括点击全选按钮时选中所有输入框，点击反选按钮时反向选择输入框的状态。

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

});

    $(document).ready(function(){
           $("#allsel").click(function(){

           //prop全选
           var is =$(this).prop("checked");
           $("table :checkbox").prop("checked",is);

           });

           $("table :checkbox").click(function(){
               $("#allsel").prop("checked",true);
               $("table :checkbox").each(function(){
                   var is = $(this).prop("checked");
                   if(is==false){
                   $("#allsel").prop("checked",false);
                   }
               });
           });

           //prop反选
           $("#notsel").click(function(){
               $("table :checkbox").prop("checked",function(i,val){
                   return !val;

               });

           });
       });