全选/全不选/反选【DOM】

最新推荐文章于 2023-04-03 21:59:36 发布

请叫我木丁西

最新推荐文章于 2023-04-03 21:59:36 发布

阅读量681

点赞数

分类专栏： DOM

本文链接：https://blog.csdn.net/QQ1012421396/article/details/77431811

版权

DOM 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

演示效果：

代码实现：

 
    
  
 
       
 
       
 
        
 
         
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>check.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
    选择您的爱好：
     <hr/>      
     <input type="checkbox" name="checkItems" value="全选/全不选"/>全选/全不选
     <br>                           
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="游泳"/>游泳
        <input type="checkbox" name="items" value="唱歌"/>唱歌
        <br>
        <input type="button" name="checkall" id="checkall" value="全选" />    
        <input type="button" name="checkall" id="checkallNo" value="全不选" />
        <input type="button" name="checkall" id="check_revsern" value="反选" />
  </body>
  <script language="JavaScript">
        //******************************全选  
        //获取id=checkall的按钮对象，并添加onclick事件
        document.getElementById("checkall").onclick = checkall; //注意js里面onclick属性调用函数不需要带()带了纠错了。html中onclick需要带()
        //全选函数
        function checkall(){
            //获取所有的checkbox类型的复选框对象
            var items_nodes = document.getElementsByName("items");
            //遍历集合，并设置其checked属性为ture
            for(var i=0; i<items_nodes.length; i++){
                items_nodes[i].checked = true;
            }
        }
        //******************************全不选 
        //获取id=checkallNo的按钮对象，并添加onclick事件
        document.getElementById("checkallNo").onclick = checkallNo;
        //全不选函数
        function checkallNo(){
            //获取所有的checkbox类型的复选框对象
            var items_nodes = document.getElementsByName("items");
            //遍历集合，并设置其checked属性为false
            for(var i=0; i<items_nodes.length; i++){
                items_nodes[i].checked = false;
            }
        }
        //******************************反选  
        //获取id=check_revsern的按钮对象，并添加onclick事件
        document.getElementById("check_revsern").onclick = check_revsern;
        //反选函数
        function check_revsern(){
            //获取所有的checkbox类型的复选框对象
            var items_nodes = document.getElementsByName("items");
            //遍历集合
            for(var i=0; i<items_nodes.length; i++){
                if(items_nodes[i].checked == true){//判断每一个选项的checked值，如果为true，则改为false；如果为false，则改为true
                    items_nodes[i].checked = false;
                }else{
                    items_nodes[i].checked = true;
                }
            }
        }
        //******************************全选/全不选  
        //获取name属性为checkItems的复选按钮的复选框对象，并添加onclick事件
        document.getElementsByName("checkItems")[0].onclick = checkItems;
        function checkItems(){
            //判断该复选按钮的checked值，如果为true，则name属性值为items的复选框全选；否则，全不选
            if(this.checked == true){
                checkall();//调用全选函数
            }else{
                checkallNo();//调用全不选函数
            }
        }
    
    
  </script>
</html>
 
   