使用jQuery完成复选框的全选和全部选(对比JavaScript)

1、案例描述

     开发中,经常表格数据进行批处理,就需要快速的对列表项进行操作,比如全选和全不选。

2、jQuery代码实现

$(function(){
    //1、为复选框绑定单击事件
    $("#selectAll").click(function(){
        //方式一:
        if(this.checked == true){
            //如果复选框已经是选中状态了
            $("input[name='ids']").prop("checked",true);
        }else{
            //复选框没有被选中
            $("input[name='ids']").prop("checked",flase);
        }
        

        //方式二:
        $("input[name='ids']").prop("checked",this.checked);

    });
});

3、JavaScript代码实现(对比)

     3.1、给复选框添加onclick事件

<input type="checkbox" onclick="selectAll(this)">

     3.2、编写selectAll(this)处理列表项的复选框是否勾选

<script type="text/javascript">
    function selectAll(obj){
        //如果当前复选框为选中状态,则其他都选中,否则都不选中
        //ByClassName--->通过标签class属性的名称获得对应的标签
        var allCheckbox = document.getElementByClassName("itemSelect");
        for(var i = 0; i < allCheckbox.length; i++){
            allCheckbox[i].checked = obj.checked;
        }
    }
</script>

猜你喜欢

转载自blog.csdn.net/weixin_42078450/article/details/86556648
今日推荐