[js代码] input checkbox 全选与取消全选

最新推荐文章于 2021-02-18 18:57:42 发布

原创最新推荐文章于 2021-02-18 18:57:42 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

欢迎转载，注明作者和出处就好！如果有任何问题或文章存在明显的谬误，请留言说明原因谢谢，我也可以知道原因，不断进步！

文章标签：

#checkbox #javascript

【编程语言】➣ js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页中复选框全选与取消全选功能的方法。通过两个简单的函数，可以方便地控制一组具有相同名称属性的复选框的状态。示例展示了如何将这些功能集成到按钮点击事件中。

js代码

function checkboxed(objName){
    var objNameList=document.getElementsByName(objName);    

    if(null!=objNameList){
        alert("全选操作");
        for(var i=0;i<objNameList.length;i++){
            objNameList[i].checked="checked";
        }
    }
}

function uncheckboxed(objName){
    var objNameList=document.getElementsByName(objName);    

    if(null!=objNameList){
        alert("取消全选操作");
        for(var i=0;i<objNameList.length;i++){
            objNameList[i].checked="";
        }
    }
}

html调用

看书：<input type="checkbox" name="checkbox" value=1><br>
写字：<input type="checkbox" name="checkbox"value=2><br>
玩游戏：<input type="checkbox" name="checkbox"value=4><br>
<button onclick="checkboxed('checkbox')">全选</button>
<button onclick="uncheckboxed('checkbox')">取消全选</button>