前端开发JS之简易“全选、不选、反选”

google前端开发书写规范
前端开发模式和规范
腾讯 前端开发规范

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <title>全选、不选、反选</title>
        <script>
            window.onload = function() {
                var ele1 = document.getElementById(‘btn1’)
                var ele2 = document.getElementById(‘btn2’)
                var ele3 = document.getElementById(‘btn3’)
                var oDiv = document.getElementById(‘div1’)
                var checkBox = oDiv.getElementsByTagName(‘input’)
                ele1.onclick = function() {
                    for (var i = 0; i < checkBox.length; i++) {
                        checkBox[i].checked = true
                    }
                }
                ele2.onclick = function() {
                    for (var i = 0; i < checkBox.length; i++) {
                        checkBox[i].checked = false
                    }
                }
                ele3.onclick = function() {
                    for (var i = 0; i < checkBox.length; i++) {
                        if (checkBox[i].checked == true) {
                            checkBox[i].checked = false
                        } else {
                            checkBox[i].checked = true
                        }
                    }
                }
            }
        </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” /> <input type=”checkbox” />
            <input type=”checkbox” /> <input type=”checkbox” />
            <input type=”checkbox” />
        </div>
    </body>
</html>
google前端开发规范
腾讯前端开发规范
前端开发尺寸规范
» 本文来自:前端开发者 » 《前端开发JS之简易“全选、不选、反选”》
» 本文链接地址:https://www.rokub.com/7105.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!