Jquery全选系列操作（锋利的jQuery）

Posted 2021-02-06 chaonuanxi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery全选系列操作（锋利的jQuery）相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>复选框应用</title>
    <script src="../../js/jquery-1.4.4.min.js"></script>
</head>
<body>
    <form >
        你爱好的运动是？<br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br />
        <input type="button" id="CheckedAll" value="全选" />
        <input type="button" id="CheckedAllNo" value="全不选" />
        <input type="button" id="CheckedRev" value="反选" />
        <input type="button" id="send"   value="提交" />
    </form>

    <!--<form style="display:none" >
        你爱好的运动是？<br />
        <input type="button" id="CheckedAll" value="全选/全不选" />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br />
    </form>-->
    <script>
        $(function ()
        {
            //全选
            $("#CheckedAll").click(function () {

                 $(‘[name=items]:checkbox‘).attr("checked", true);  //attr() 方法设置或返回被选元素的属性值。

                //下面只是研究,或者是可参考,（我还没弄懂）
                //判断如果当前复选框被选中
                //if (this.checked) {
                //    $(‘[name=items]:checkbox‘).attr("checked", true);  //attr() 方法设置或返回被选元素的属性值。
                //}
                //else {
                //    $(‘[name=items]:checkbox‘).attr("checked", false);  //attr() 将checked 设置为false即被全不选。
                //}

                //$(‘[name=items]:checkbox‘).attr("checked", this.checked);  //attr() 方法设置或返回被选元素的属性值。

                //可以去掉if判断
                //$(‘[name=items]:checkbox‘).click(function () {
                //    var flag = true;
                //    $(‘[name=items]:checkbox‘).each(function () {
                //        if (!this.checked) {
                //            flag = false;
                //        }
                //    });
                //    $("#checkedall").attr("checked", flag);
                //})
             

            });
            //全不选
            $("#CheckedAllNo").click(function () {
                $(‘[name=items]:checkbox‘).attr("checked", false);  //attr() 将checked 设置为false即被全不选。
            });

            //反选,如果选中，则不选中，如果不选中则选中
            //$("#CheckedRev").click(function () {
            //    $(‘[name=items]:checkbox‘).each(function () {
            //        $(this).attr("checked", !$(this).attr("checked"));  //$(this)取出当前对象并转换为jQuery对象
            //    })
            //});

            //代码简化反选
            $("#CheckedRev").click(function () {
                $(‘[name=items]:checkbox‘).each(function () {
                    this.checked = !this.checked;
                })
            });

            //提交显示选中的check值
            $("#send").click(function ()
            {
                var str = "你选中的是
";
                $(‘[name=items]:checkbox:checked‘).each(function () {
                    str += $(this).val() + "
";
                });
                alert(str)
            })
        })
    </script>
</body>
</html>

以上是关于Jquery全选系列操作（锋利的jQuery）的主要内容，如果未能解决你的问题，请参考以下文章

jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）

锋利的jQuery ——jQuery中的DOM操作