原生js写的复选框的全选、不选、反选

最新推荐文章于 2023-02-21 15:38:18 发布

dianmian5038

最新推荐文章于 2023-02-21 15:38:18 发布

阅读量139

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/abigale/p/5148393.html

版权

<!DOCTYPE html>
<html>
<head>
    <title>全选，不选，反选</title>
    <meta charset="UTF-8">
    <script type="text/javascript">
    window.onload = function(){
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var btn3 = document.getElementById("btn3");
        var btn4 = document.getElementById("btn4");
        var option1 = document.getElementById("option1");
        var o = option1.getElementsByTagName("input");

        btn1.onclick = function(){
            for(var i = 0 ; i< o.length ;i++){
                o[i].checked = true;
            }
        };
        btn2.onclick = function(){
            for(var i = 0 ; i< o.length ;i++){
                o[i].checked = false;
            }
        };

        btn3.onclick = function(){
            for(var i = 0 ; i< o.length ;i++){
                o[i].checked = ! o[i].checked;
            }
        };


    </script>
</head>
<body>
<div>
    <input type="button" id="btn1" value="全选" />
    <input type="button" id="btn2" value="不选" />
    <input type="button" id="btn3" value="反选" />
    <div id="option1">
        <input type="checkbox"><br/>
        <input type="checkbox"><br/>
        <input type="checkbox"><br/>
        <input type="checkbox"><br/>
        <input type="checkbox"><br/>
        <input type="checkbox"><br/>
        <input type="checkbox"><br/>
        <input type="checkbox"><br/>
    </div>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/abigale/p/5148393.html

dianmian5038

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js写的复选框的全选、不选、反选

<!DOCTYPE html><html><head> <title>全选，不选，反选</title> <meta charset="UTF-8"> <script type="text/javascript"> window.onload = func...
复制链接

扫一扫