jQuery对复选框（checkbox)的全选，全不选，反选等的操作

最新推荐文章于 2022-03-23 22:03:57 发布

longzhoufeng

最新推荐文章于 2022-03-23 22:03:57 发布

阅读量1.1k

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/longzhoufeng/article/details/76449211

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.v2.2.2.min.js"></script>
</head>
<body>
<script>
    $(function() {

        //全选/全不选
        $("#all").click(function() {
            $("[name=items]:checkbox").attr("checked", this.checked);
        });
        $("[name=items]:checkbox").click(function() {
            var flag = true;
            $("[name=items]:checkbox").each(function() {
                if(!this.checked) {
                    flag = false;
                }
            });
            $("#all").attr("checked", flag);
        })
        //全选
        $("#selectAll").click(function() {
            $("[name=items]:checkbox").each(function() {
                $(this).attr("checked", true);
            });
        });
        //全不选
        $("#unSelect").click(function() {
            $("[name=items]:checkbox").each(function() {
                $(this).attr("checked", false);
            });
        });
        //反选
        $("#reverse").click(function() {
            $("[name=items]:checkbox").each(function() { //遍历每一个复选框
                //$(this).attr("checked",!$(this).attr("checked")); //jQuery方法取复选框的反向值
                this.checked = !this.checked; //js方法
            });
        });
        //输出选中的值
        $("#btn").click(function() {
            var str = "你选中的是：\r\n";
            $("[name=items]:checkbox:checked").each(function() {
                str += $(this).val() + "\r\n";
            });
            alert(str);
        });
    })
</script>
<ul id="list">
    <li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li>
    <li><label><input type="checkbox" name="items" value="2"> 2.海阔天空</label></li>
    <li><label><input type="checkbox" name="items" value="3"> 3.真的爱你</label></li>
    <li><label><input type="checkbox" name="items" value="4"> 4.不再犹豫</label></li>
    <li><label><input type="checkbox" name="items" value="5"> 5.光辉岁月</label></li>
    <li><label><input type="checkbox" name="items" value="6"> 6.喜欢妳</label></li>
</ul>
<input type="checkbox" id="all"> 全选/全不选</br>
<input type="button" value="全选" class="btn" id="selectAll">
<input type="button" value="全不选" class="btn" id="unSelect">
<input type="button" value="反选" class="btn" id="reverse">
<input type="button" value="获得选中的所有值" id="btn" id="getValue">
</body>
</html>