js 全选反选和全不选

最新推荐文章于 2024-04-02 19:39:43 发布

baobi7088

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量68

点赞数

原文链接：http://www.cnblogs.com/wysAC666/p/9889195.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        /*获取表单里的元素可以使用getElementsByName()方法，该方法返回的也是元素对象集合。
        复选框对象的checked属性操作其是否被选，值是true表示被选，值是false表示没有被选。
        根据以上提示，实现三个按钮的对应功能。*/
        window.onload = function(){
            var selectall = document.getElementById('all');
            var selectno = document.getElementById('allNo');
            var selectInvert = document.getElementById('noCheck');
            var checkboxs = document.getElementsByName('hobby');
            selectall.onclick = All;
            selectno.onclick = No;
            selectInvert.onclick = Invert;
            function All(){
                for(var i=0; i<checkboxs.length;i++){
                    checkboxs[i].checked = true;
                }
        }    
            function No(){
                for(var i=0;i<checkboxs.length;i++){
                    checkboxs[i].checked = false;
                }
            }
            function Invert(){
                for(var i=0;i<checkboxs.length;i++){
                    if(checkboxs[i].checked == true){
                        checkboxs[i].checked = false;
                    }else if(checkboxs[i].checked == false){
                        checkboxs[i].checked = true;
                    }
                }
            }    
        }
    </script>
</head>
<body>
    <form action="">
        <input type="checkbox" name="hobby" id="basket" value="basket">篮球<Br>
        <input type="checkbox" name="hobby" id="zuqiu" value="zuqiu" >足球<Br>
        <input type="checkbox" name="hobby" id="paiqiu" value="paiqiu">排球<Br>
        <input type="checkbox" name="hobby" id="wqiu" value="wqiu">网球<Br>
        <input type="checkbox" name="hobby" id="biqiu" value="biqiu">壁球<Br>
        <input type="checkbox" name="hobby" id="bpq" value="bpq">乒乓球<Br>
        <input type="checkbox" name="hobby" id="ymq" value="ymq">羽毛球<Br>
        <input type="button" name="selectAll" id="all" value='全选'>
        <input type="button" name="selectNo" id="allNo" value='全不选'>
        <input type="button" name="selectInvert" id="noCheck" value='反选'>
  </form>
</body>
</html>

转载于:https://www.cnblogs.com/wysAC666/p/9889195.html

baobi7088

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 全选反选和全不选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> /*获取表单里的元素可以使用getElementsByNa...
复制链接

扫一扫