javascript实现全选,全不选,反选

Posted 苏落

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript实现全选,全不选,反选相关的知识,希望对你有一定的参考价值。

效果:

利用input的checked属性来实现:checked值为true,表示被选择,否则反之。

 

实现代码:

js代码:

<script>

var butt1 = document.getElementById("butt1");
var butt2 = document.getElementById("butt2");
var butt3 = document.getElementById("butt3");
var pInput = document.getElementById("pInput");
var opInput = pInput.getElementsByTagName("input");
butt1.onclick = function(){
  for(var i = 0;i<opInput.length;i++){
    opInput[i].checked = true;
  }
}
butt2.onclick = function(){
  for(var i = 0;i< opInput.length;i++){
    opInput[i].checked = false;                
  }
}
butt3.onclick = function(){
  for(var i = 0;i< opInput.length;i++){
    if(opInput[i].checked == false){
      opInput[i].checked = true;
    }
    else{
      opInput[i].checked = false;
    }    
  }        
}

</script>

 

实现过程:

1.通过var butt1 = document.getElementById("butt1")来获取对应的id元素。

2.butt1.onclick = function(){  }添加点击事件

3.通过对应元素的.getElementsByTagName(" ")获取该元素下的所有子元素,即数组。(不要忘记那个s)

凡是通过.getElementsByTagName(" ")来获取标签元素的,最后都为数组,可以用索引[i]获取。

4.尽量不使用document.getElementByClassName来获取class元素,我从网上看似乎是说兼容性不太好,有时候浏览器识别不出来。

5.input是checkbox类型时才可进行多选,即全选。radio类型时只能是单选。

 

完整代码:

<html>
<head>
    <meta charset="utf-8" />
    <title>1</title>
    
    
</head>

<body>
    <div class="Form">
        <form>
            <input type="button" value="全选" id="butt1"></input>
            <input type="button" value="全不选" id="butt2"></input>
            <input type="button" value="反选" id="butt3"></input><br/>

        <p id="pInput">
            <input type="checkbox" value="苹果">苹果</input><br/>
            <input type="checkbox" value="香蕉">香蕉</input><br/>
            <input type="checkbox" value="橘子">橘子</input>
        </p>
            
        </form>
    </div>
</body>

<script>

            var butt1 = document.getElementById("butt1");
            var butt2 = document.getElementById("butt2");
            var butt3 = document.getElementById("butt3");
            var pInput = document.getElementById("pInput");
            var opInput = pInput.getElementsByTagName("input");
            
            butt1.onclick = function(){
                for(var i = 0;i<opInput.length;i++){
                    opInput[i].checked = true;
                }
            }

            butt2.onclick = function(){
                for(var i = 0;i< opInput.length;i++){
                    opInput[i].checked = false;                
                }
            }
            
            butt3.onclick = function(){
                for(var i = 0;i< opInput.length;i++){
                    if(opInput[i].checked == false){
                        opInput[i].checked = true;
                    }
                    else{
                        opInput[i].checked = false;
                    }    
                }        
            }
            
        
    </script>

</html>
View Code

 

参考博客:https://www.cnblogs.com/tynam/p/9833759.html

以上是关于javascript实现全选,全不选,反选的主要内容,如果未能解决你的问题,请参考以下文章

用jQuery实现(全选反选全不选功能)

利用jQuery实现CheckBox全选/全不选/反选

js 判断 复选框全选全不选反选必选一个

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

Vue实现单选、全选和反选

利用js实现全选反选全不选(button)