您的位置：首页 > Web前端 > JQuery

JQuery实现全选,不选，反选功能

2014-08-05 14:26 525 查看

<html>
<head>
    <title>全选，不选，反选</title>
    <script src="jquery-2.0.3.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            $("#selAll").click(function () {
			    $(".ckb :checkbox").prop('checked', true);
            });

            $("#unSelAll").click(function () {
			    $(".ckb :checkbox").prop('checked', false);
            });

            $("#reverSel").click(function () {
                $(".ckb :checkbox").each(function (i) {
                if (this.checked) {
                  this.checked = false;
               }
               else {
                this.checked = true;
                }
           
               });
            });
			
			$("#getValue").click(function () {
			  var selValue = "";
			  $(".ckb :checkbox:checked").each(function (i) {
              selValue = selValue + $(this).val() + ",";
              });
			  if (selValue != "") {
                selValue = selValue.substr(0, selValue.length - 1);
              }
			  alert(selValue);
            });
			
			$("#postValue").click(function () {
			     $(".ckb :checkbox").prop('checked', false);
                var getValue = "修改密码,评论管理,备份数据";
                var strall = [];
                strall = getValue.split(",");
                for (var i = 0; i < strall.length; i++) {
                    $(".ckb :checkbox[value='" + strall[i] + "']").prop('checked', true);
                }
            });
        });
    </script>
</head>
<body>
    <div class="ckb">
        <input id="ckb1" type="checkbox" value="修改密码" />
        修改密码
        <input id="ckb2" type="checkbox" value="评论管理" />
        评论管理
        <input id="ckb3" type="checkbox" value="删除文章" />
        删除文章
        <input id="ckb4" type="checkbox" value="删除用户" />
        删除用户
        <input id="ckb5" type="checkbox" value="备份数据" />
        备份数据
    </div>
    <div class="btn">
        <input id="selAll" type="button" value="全选" />
        <input id="unSelAll" type="button" value="全不选" />
        <input id="reverSel" type="button" value="反选" />
		 <input id="getValue" type="button" value="选中值" />
		 <input id="postValue" type="button" value="给定值选中checkbox">
    </div>
</body>
<html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航