歌曲选择（全选，全不选，反选）功能的实现

最新推荐文章于 2021-06-03 16:22:58 发布

原创最新推荐文章于 2021-06-03 16:22:58 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input #function #button #javascript #jquery #div

javascript 专栏收录该内容

66 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现复选框全选、反选及全不选功能的方法，并提供了具体的网页示例代码，包括纯JavaScript和jQuery两种实现方式。

javascript代码：

function selectAll() {
            //获得全选
            var checkAll = document.getElementById("checkAll");
            //所有爱好
            var hobbies = document.getElementsByName("hobby");
            //当其选中时，所有爱好选中
            if (checkAll.checked) {
                for (var i = 0; i < hobbies.length; i++) {
                    hobbies[i].checked = checkAll.checked;
                }
            }
        }

        //为所有的爱好注册事件
        window.onload = function () {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                //为每个爱好注册点击事件
                hobbies[i].onclick = hobbyClick;
            }
        }

        function hobbyClick() {
            var checkAll = document.getElementById("checkAll");
            var noneAll = document.getElementById("noneAll");
            var hobbies = document.getElementsByName("hobby");
            //假定所有爱好都被选中
            var flag = true;
            for (var i = 0; i < hobbies.length; i++) {
                if (!hobbies[i].checked) {
                    flag = false;
                    //break;
                } else {
                    noneAll.checked = false;
                }
            }

            checkAll.checked = flag;
        }

        function reserveAll() {
            var checkAll = document.getElementById("checkAll");
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = !hobbies[i].checked;
            }
            //设置每个爱好后，检查其所有状态
            hobbyClick();
        }

        function noneAll() {
            var checkAll = document.getElementById("checkAll");
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = false;
            }
            //设置每个爱好后，检查其所有状态
            hobbyClick();
        }

网页内容：

<input type="checkbox" id="checkAll" onclick="selectAll()" />全选<input type="checkbox"
        id="reserveAll" onclick="reserveAll()" />反选<input type="checkbox" id="noneAll" onclick="noneAll()" />全不选<br />
    <input type="checkbox" id="Checkbox1" name="hobby" />书法<input type="checkbox" name="hobby"
        id="Checkbox2" />足球<input name="hobby" type="checkbox" id="Checkbox3" />音乐<input
            name="hobby" type="checkbox" id="Checkbox5" />打飞机<input name="hobby" type="checkbox"
                id="Checkbox6" />喝啤酒

jquery版：

$(function () { $("#songs input[value=全选]").click(function () { $("#songs input[type=checkbox]").attr("checked", true); }); $("#songs input[value=全不选]").click(function () { $("#songs input[type=checkbox]").attr("checked", false); }); $("#songs input[value=反选]").click(function () { $("#songs input[type=checkbox]").each(function () { $(this).attr("checked", !$(this).attr("checked")); //this.checked = !this.checked; }); }); });