checkbox“全选”与“反选”

最新推荐文章于 2021-09-12 17:38:00 发布

原创最新推荐文章于 2021-09-12 17:38:00 发布 · 205 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何实现checkbox的全选和反选功能。提供了两种不同的实现方式，并针对动态生成的元素给出了事件绑定的解决策略，强调了在动态元素上使用on事件绑定的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

checkbox“全选”与“反选”

动态生成的
这里写图片描述

1. 全选操作———2. 取消全选
***方式一：

//全选
$("#checkId").click(function(){
    if($("#checkId")[0].checked){
            var $row=$("input[name=rowCheck]");
            for(var i=0;i<$row.length;i++){
                $row[i].checked=true;
            }
    }else{
            var $row=$("input[name=rowCheck]");
            for(var i=0;i<$row.length;i++){
                $row[i].checked=false;
            }
    }
})

***方式二：

$("input[name=rowCheck]").prop("checked",this.checked);

选中单个checkbox
如果是动态生成元素，不使用lclick绑定事件，使用on的形式来绑定事件
首先定位到动态生成元素的上一级元素，为上一级元素绑定事件
$(“上级元素（尽量是父级）”).on(“绑定的事件”,“动态的生成元素”,function(){})

$("#checkId").click(function(){
            $("input[name=rowCheck]").prop("checked",this.checked);
            $("#tBodyId").on("click","input[name=rowCheck]",function(){            
                $("#checkId").prop("checked",$("input[name=rowCheck]").length==$("input[name=rowCheck]:checked").length);
            })      
})