js实现全选,全不选和反选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript实例</title>
        <style>
            ul{list-style:none;}
            li{line-height:30px;}
        </style>
    </head>
    <body>
          
        <h3 id="hid">JavaScript实例--函数</h3>
        <form name="myform">
            <ul>
                <li><input type="checkbox" name="like"/>篮球</li>
                <li><input type="checkbox" name="like"/>足球</li>
                <li><input type="checkbox" name="like"/>排球</li>
                <li><input type="checkbox" name="like"/>网球</li>
            </ul>
        </form>
            <button             <button             <button           
        <script type="text/javascript">
              
            //全选或全不选函数
            function doSelect(b){
                //获取上面所有的多选框
                var list = document.myform.like;
                //遍历所有多选框
                for(var i=0;i<list.length;i++){
                    list[i].checked=b;
                }
            }
              
             //反选函数
            function doFun(){
                //获取上面所有的多选框
                var list = document.myform.like;
                //遍历所有多选框
                for(var i=0;i<list.length;i++){
                    list[i].checked = !list[i].checked;
                }
            }
          
          
            //获取h3节点对象
           // var hid = document.getElementById("hid");
            //修改h3节点样式
           //hid.style.color="red";
        </script>
    </body>
</html>


本文出自 “梦之翼” 博客,转载请与作者联系!

js实现全选,全不选和反选,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。