Jquery通用方法之路(一) 实现checkbox全选方法

//****************************************************************************************//作者：轻狂书生//博客地址：http://www.cnblogs.com/xiaoshuai1992//create: 2014/1/15//功能：实现checkbox的智能全选//使用方法：引用jquery,设置要全选的checkbox 组name一样，全选的checkbox设置class为下面变量xsChk//*****************************************************************************************$(document).ready(function () {    var xsChk = "xsChk";//定义的样式    var xsChkAll = "input[type='checkbox'][class='" + xsChk + "'][name]";//所有定义此样式的checkbox    $(xsChkAll).each(function () {        var name = $(this).attr("name");        name = "input[type='checkbox'][class!='" + xsChk + "'][name='" + name + "']";//此全选框下面的子checkbox        $(this).click(function () {            $(name).attr("checked", $(this)[0].checked);        })        var xschk = $(this);        $(name).click(function () {            var IAll = $(name).length; //此子项目下所有checkbox的个数            var IChk = $(name + ":checked").length; //此子项目下所有勾选checkbox的个数            var isAllChecked = true; //是否是全选            if (IAll != IChk) {                isAllChecked = false;            }            $(xschk).attr("checked", isAllChecked);        });    });});

页面使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title></head><body>    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">    </script>    <script src="xs_checkbox_all.js" type="text/javascript"></script>    <fieldset>        <legend>全选one</legend>        <input type="checkbox" class="xsChk" name="chk" />        全選    <div>        <input type="checkbox" name="chk" />        1<br />        <input type="checkbox" name="chk" />        2<br />        <input type="checkbox" name="chk" />        3<br />        <input type="checkbox" name="chk" />        4<br />    </div>    </fieldset>    <fieldset>        <legend>全选two</legend>        <input type="checkbox" class="xsChk" name="chk1" />        全選2    <div>        <input type="checkbox" name="chk1" />        11<br />        <input type="checkbox" name="chk1" />        22<br />        <input type="checkbox" name="chk1" />        33<br />        <input type="checkbox" name="chk1" />        44<br />    </div>    </fieldset></body></html>

可以达到效果，如果有什么优化的地方，请大家提出，我会做的更好,谢谢大家了

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。