原生js前端开发复选框_全选/不选/反选

前端移动端开发要注意的问题|web前端开发js面试宝典|面试前端开发需要作品么?

html 代码片段

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <title>web前端开发0基础视频教程:复选框</title>
    <script>
        window.onload = function () {
            var obtn1 = document.getElementById(‘btn1’);
            var obtn2 = document.getElementById(‘btn2’);
            var obtn3 = document.getElementById(‘btn3’);
            var odiv = document.getElementById(‘div1’);
            var ocheck = odiv.getElementsByTagName(‘input’);
            obtn1.onclick = function () { //全选
                for (var i = 0; i < ocheck.length; i++) {
                    ocheck[i].checked = true;
                }
            };
            obtn2.onclick = function () { //不选
                for (var i = 0; i < ocheck.length; i++) {
                    ocheck[i].checked = false;
                }
            };
            obtn3.onclick = function () { //反选
                for (var i = 0; i < ocheck.length; i++) {
                    ocheck[i].checked = !ocheck[i].checked;
                }
            };
        }
    </script>
</head>
<body>
    <input type=”button” id=”btn1″ value=”全选” />
    <input type=”button” id=”btn2″ value=”不选” />
    <input type=”button” id=”btn3″ value=”反选” />
    <div id=”div1″>
        <input type=”checkbox” />
        <input type=”checkbox” />
        <input type=”checkbox” />
        <input type=”checkbox” />
        <input type=”checkbox” />
        <input type=”checkbox” />
        <input type=”checkbox” />
        <input type=”checkbox” />
        <input type=”checkbox” />
        <input type=”checkbox” />
        <input type=”checkbox” />
    </div>
</body>
</html>
前端开发工具 js|js前端开发面试题及答案|a开头的前端开发工具
» 本文来自:前端开发者 » 《原生js前端开发复选框_全选/不选/反选》
» 本文链接地址:https://www.rokub.com/3857.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!