JavaScript实现复选框全选

最新推荐文章于 2025-07-07 16:24:22 发布

昔梦无痕

最新推荐文章于 2025-07-07 16:24:22 发布

阅读量853

点赞数

分类专栏：客户端技巧

客户端技巧专栏收录该内容

34 篇文章

订阅专栏

本文介绍了在网页中实现复选框全选及反选功能的两种不同方法。方法一使用JavaScript通过事件触发实现全选和反选；方法二通过调用不同的函数实现全选、全不选和反选操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：

<script type="text/javascript">  
    function selectIt() {  
        form = document.lzyy  
        action = event.srcElement.name  
        for (var i = 0; i < form.elements.length; i++) {  
            if (form.elements[i].name == "checkbox") {  
                e = form.elements[i]  
                e.checked = (action == "selectAll") ? (form.selectAll.checked) : (!e.checked)  
                ////在这里 通过条件表达式?:来使每个框反选。朋友们可以好好思考一下。这种首先是一种实现方式。其二 还能是代码简练。哈哈 反正个人是喜欢这种方式拉。  
            }  
        }  
    }  
</script>

<form name="lzyy">
  <p class="STYLE1"> 全 选
    <input type="checkbox" name="selectAll" value="checkbox" onClick="selectIt()">
    <br>
    反 选
    <input type="checkbox" name="invest" value="checkbox" onClick="selectIt()">
    <br>
    Item1
    <input type="checkbox" name="checkbox" value="checkbox">
    <br>
    Item2
    <input type="checkbox" name="checkbox" value="checkbox">
    <br>
    Item3
    <input type="checkbox" name="checkbox" value="checkbox">
    <br>
    Item4
    <input type="checkbox" name="checkbox" value="checkbox">
    <br>
    Item5
    <input type="checkbox" name="checkbox" value="checkbox">
  </p>
</form>

方法二：

<html>  
    <head>  
        <script type="text/javascript">  
            function checkEvent(name, allCheckId) {  
                var allCk = document.getElementByIdx_x(allCheckId);  
                if (allCk.checked == true) checkAll(name);  
                else checkAllNo(name);  
            }  
            //全选  
            function checkAll(name) {  
                var names = document.getElementsByName(name);  
                var len = names.length;  
                if (len > 0) {  
                    var i = 0;  
                    for (i = 0; i < len; i++)  
                    names[i].checked = true;  
                }  
            }  
            //全不选  
            function checkAllNo(name) {  
                var names = document.getElementsByName(name);  
                var len = names.length;  
                if (len > 0) {  
                    var i = 0;  
                    for (i = 0; i < len; i++)  
                    names[i].checked = false;  
                }  
            }  
            //反选  
            function reserveCheck(name) {  
                var names = document.getElementsByName(name);  
                var len = names.length;  
                if (len > 0) {  
                    var i = 0;  
                    for (i = 0; i < len; i++) {  
                        if (names[i].checked) names[i].checked = false;  
                        else names[i].checked = true;
                    }  
                }  
            }  
        </script>  
    </head>  
    <body>  
        <input type="checkbox" id="ckall" onclick="checkEvent('ck','ckall')" />  
        全选  
        <input type="checkbox" id="ckReserve" onclick="reserveCheck('ck','ckReserve')" 
        />  
        反选  
        <br />  
        <input type="checkbox" name="ck" value="1" />  
        篮球  
        <br />  
        <input type="checkbox" name="ck" value="2" />  
        旅游  
        <br />  
        <input type="checkbox" name="ck" value="3" />  
        读书  
        <br />  
        <input type="checkbox" name="ck" value="4" />  
        美食  
        <br />  
        <input type="checkbox" name="ck" value="5" />  
        睡觉  
    </body>   
</html>