Jquery 中checkbox简单实用选择器

1、JS部分：

　　有时候碰到常用的checkbox选择的时候容易忘，今天有时间稍微记下来

    <script src="../script/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {

            $("#btn1").click(function () {//全选
                $("input[name='chekItem']").each(function () {
                    $(this).attr("checked",true);
                });
            });

            $("#btn2").click(function () {//取消全选
                $("input[name='chekItem']").removeAttr("checked");
            });

            $("#btn3").click(function () {//反选
                $("input[name='chekItem']").each(function () {
                    if ($(this).attr('checked')) {
                        $(this).removeAttr('checked');
                    }
                    else {
                        $(this).attr("checked", true);
                    }
                });
            });

            $("#btn4").click(function () {//选中所有偶数同时去掉奇数的选中
                $("input[name='chekItem']:odd").each(function () {
                    $(this).attr("checked", true);
                });
                $("input[name='chekItem']:even").each(function () {
                    $(this).attr("checked", false);
                });
            });

            $("#btn5").click(function () {//输出选中的值
                var str = "";
                $('input[name="chekItem"]:checked').each(function () {
                    str += $(this).val() + "\n";
                    alert($(this).val());
                });
                alert(str);
            });

        })
    </script>

HTML部分：

<body>
 <input type="checkbox" name="chekItem"  value="苹果"/>苹果
 <input type="checkbox" name="chekItem"  value="香蕉"/>香蕉
 <input type="checkbox" name="chekItem"  value="葡萄"/>葡萄
 <input type="checkbox" name="chekItem"  value="桃子"/>桃子
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <input type="button" id="btn1" value="全选" />
 <input type="button" id="btn2" value="取消全选 " />
 <input type="button" id="btn3" value="反选 " />
 <input type="button" id="btn4" value="选中所有偶数 " />
 <input type="button" id="btn5" value="输出选中的值 " />
</body>

 

posted @ 2013-09-26 16:17  看看天上云  阅读(291)  评论(0)  编辑  收藏  举报