js实现全选 全不选 反选 复选 提交

标签：checked 反选 js 全选 选中 likes 复选框 var document

首先是全选框

       要先获取几个选项的元素

      给多选项Input一个name属性

      然后用getElementsByName获取所有name元素

       然后用获取全选按钮的id元素

      给全选按钮加单击事件 加一个for循环 全部选中

var Allck = document.getElementById('Allck');

//单击事件

  Allck.onclik=function(){

var likes=document.getElementsByName('like');

for(var i=0;i<likes.length;i++){
       like[i].checked=true;//利用伪数组的length属性 选中伪数组的所有元素
    
}

 one.checked = true;//复选框的初始状态

}        

 全不选框

      前面的操作与全选框一样

      不同点：在for循环中条件改为false  在点击全不选框是则都改为false不选中

var NOCK  = document.getElementById('NOCK ');
//单击事件
 NOCK .onclik=function(){
var likes=document.getElementsByName('like');
for(var i=0;i<likes.length;i++){
       like[i].checked=false;

    
}
 one.checked = true;//复选框的初始状态

}        

反选框

    前几个步骤与前面的都大同小异

   不同点：在for循环中要加一个判断 选中的框为true时 点击反选按钮则之前选中的为false 未选中的为true

var  FANK=document.getElementByid('FANK');
//单击事件
FANK.onclick=function(){
    var likes=document.getElementByName('like');
    for(var i=0;i<likes.length;i++){
    if(like[i]==false){
      
     like[i]=true;
}else{
    like[i]==false
   
}
     
}
 one.checked = true;//复选框的初始状态
     
}

复选框

  添加单击事件之后  需要加三个for循环

  第一个 如果伪数组中的所有选项都选中则复选框选中

  第二个 第二个设置复选框的初始状态

  然后在第二个for循环中套一个for循环   如果伪数组中第一个元素未选中则不再进行下一步判断  直接结束 复选框结果直接为false

  var one = document.getElementById('one');
        one.onclick = function () {
            
            var likes = document.getElementsByName('like');
            for (var i = 0; i < likes.length; i++) {
                likes[i].checked = one.checked;//如果伪数组中的所有选项都选中则复选框选中
            };
            for (var i = 0; i < likes.length; i++) {
                   likes[i].onclick=function(){
                    one.checked = true;//初始状态为true 
              //进行循环判断 如果伪数组中第一个元素未选中则不再进行下一步判断  直接结束 复选框结果直接为false
                for (var j = 0; j < likes.length; j++) {
                    if (likes[j].checked == false) {
                        one.checked = false;
                        break;
                    }

                }
            }
            }

提交

    var SUBCK = document.getElementById('SUBCK');
        SUBCK.onclick = function () {
          
            var likes = document.getElementsByName('like');
            // alert('bjyx');
            //进行循环判断 如果选中为数组中的选项 则最终点击提交按钮时弹出该选项的值
            for (var i = 0; i < likes.length; i++) {
                 if(likes[i].checked==true){
                    alert(likes[i].value);//直接获取input标签中的value值 则提交时就可以弹出选中的值
                 }
                 };
        }

 

 body部分

 

  

标签：checked,反选,js,全选,选中,likes,复选框,var,document
From： https://www.cnblogs.com/gzx060816/p/17220613.html