jquery checkbox全选

最新推荐文章于 2024-04-17 09:12:12 发布

o0wufan0o

最新推荐文章于 2024-04-17 09:12:12 发布

阅读量850

点赞数

分类专栏： JS Jquery 文章标签： jquery input function header html

本文链接：https://blog.csdn.net/o0wufan0o/article/details/6647113

版权

JS Jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html>
<head>
     <title>jquery全选</title>
     <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        //全选/取消CheckBox
        function CheckAll(cbAllId) {
            var keys = $("#txtKeys").val("").val();
            //遍历页面中所有CheckBox,
            //根据GridView头中CheckBox的checked值设置所有CheckBox的checked值,
            //同时，如果Header中CheckBox为选中则获取所有其他CheckBox的值（角色编码），
            //构造：'值','值',...格式的字符串，方便in查询，
            //如果Header中CheckBox的Checked值为false则清空txtKeys中的值
            $(":checkbox").each(function () {
                //设置当前遍历到的CheckBox的选中状态跟“全选”CheckBox一样
                $(this).attr("checked", $("#cbAll").attr("checked"));
                //如果当前CheckBox选中，将值追加到隐藏域的value
                var cbValue = "'" + $(this).val() + "',";
                if ($("#cbAll").attr("checked") && $(this).attr("id") != "cbAll") {
                    keys += cbValue;
                }
            });

            $("#txtKeys").val(keys);
        }
        //单行选择
        function CheckRow(cb) {
            var keys = $("#txtKeys").val();
            var cbValue = "'" + $(cb).val() + "',";
            //移除
            if (!$(cb).attr("checked")) {
                keys = keys.replace(cbValue, "");
            } else if (keys.indexOf(cbValue) == -1) {//追加
                keys += cbValue;
            }
            $("#txtKeys").val(keys);
        }

</script>

</head>

<body>

<input id="cbRow1" value='33' type="checkbox" οnclick="CheckRow(this);" /> 设计家园

<input id="cbRow2" value='33' type="checkbox" οnclick="CheckRow(this);" />网页教程

<input id="cbRow3" value='33' type="checkbox" οnclick="CheckRow(this);" />酷站欣赏

<input id="cbRow4" value='33' type="checkbox" οnclick="CheckRow(this);" /> 网页素材

<input id="cbAll" type="checkbox" οnclick="CheckAll();" />
全选

</body>
</html>