天天看点
返回

一个简单的checkbox全选实现

全选是很多项目中必要有的代码块

不多说直接上代码

html代码

<body>
    <table>
        <tr>
            <th><input type='checkbox' id='allcheck'/></th>
            <th>你喜欢什么</th>
        </tr>
        <tr>
            <td><input type='checkbox' /></td>
            <td>天龙八部</td>
        </tr>
        <tr>
            <td><input type='checkbox' /></td>
            <td>少年包青天</td>
        </tr>
        <tr>
            <td><input type='checkbox' /></td>
            <td>猎场</td>
        </tr>
    </table>
</body>

javascript（基于jQuery）

$(function(){
    //获取所有的除了全选的checkbox
    var cks= $(':checkbox:gt(0)');
    //给全选checkbox绑定click事件
    var allcheck=$('#allcheck').click(function(){
        //让所有非全选checkbox checked状态和全选checkbox一致
        cks.prop("checked", $(this).prop("checked"));
    })
    //每个非全选checkbox绑定事件
    cks.click(function(){
        if(!$(this).prop('checked')){
            //有不是选中的则修改全选的未非选中
            allcheck.prop('checked',false);
        }else{
            //检查所有的非全选的checkbox是否是选中的
            if(cks.filter($(':not(:checked)')).length==){
                allcheck.prop('checked',true);
            }
        }
    })
    })

觉得有问题请指正！

javascript checkbox全选 checkbox
上一篇: js实现表单checkbox的单选，全选
下一篇: 将element多选框变为单选框(学习篇)

继续阅读