一个简单的checkbox全选实现

来源：互联网发布：汽车电脑维修数据论坛编辑：程序博客网时间：2024/05/21 14:41

全选是很多项目中必要有的代码块
不多说直接上代码
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==0){                allcheck.prop('checked',true);            }        }    })    })

觉得有问题请指正！

阅读全文

0 0