zoukankan      html  css  js  c++  java
  • 纯原生操作input中type为checkbox

    //大学经验最多选择三个,否则置灰 -----纯原生
    
            for(var i=0;i<document.querySelectorAll('.answer-box').length; i++){
                document.querySelectorAll('.answer-box')[i].addEventListener("click",function(){
                    console.log(this.checked,this);
                    if(this.checked){  //选中
                        console.log("选中");
                        this.parentElement.previousElementSibling.setAttribute("id","imggray"); //选中的添加id
                    }else{  //取消选中
                        console.log("取消选中");
                        this.parentElement.previousElementSibling.removeAttribute("id");  //取消选中的删除id
                    };
                    
                    var radios = document.querySelectorAll('input[type="checkbox"]:checked');
                    // console.log(radios.length);
                    if(radios.length === 3){ //选中三个时的逻辑
                        // console.log(radios.length,document.querySelectorAll(".chooseback img"));
                        for(var j=0;j<document.querySelectorAll(".chooseback img").length;j++){
                            //
                            if(!document.querySelectorAll(".chooseback img")[j].getAttribute("id")){ 
                                document.querySelectorAll(".chooseback img")[j].nextElementSibling.style.color = "gray";
                                document.querySelectorAll(".chooseback img")[j].nextElementSibling.firstElementChild.disabled = true;
                                document.querySelectorAll(".chooseback img")[j].setAttribute("class","imggray");
                            }
                        }
                    }else{   //三个以下的逻辑
                        for(var j=0;j<document.querySelectorAll(".chooseback img").length;j++){
                            //全部恢复可点击状态
                            if(document.querySelectorAll(".chooseback img")[j].getAttribute("class") === "imggray"){
                                document.querySelectorAll(".chooseback img")[j].nextElementSibling.style.color = "#000";
                                document.querySelectorAll(".chooseback img")[j].nextElementSibling.firstElementChild.disabled = false;
                                document.querySelectorAll(".chooseback img")[j].removeAttribute("class","imggray");
                            }
                        }
                    }
                })
            }
    $('input:checkbox:checked')
    
    
    $('input[type=checkbox]:checked')
    

      

  • 相关阅读:
    返回一个首尾相连的整数数组中最大子数组的和
    《程序员修炼之道——从小工到专家》读后感一
    成功之路,贵在坚持
    有些路走下去会很苦很累,但是不走会后悔
    商品进行倒计时
    Hibernate中HQL函数汇总及获取当前时间进行比较举例
    java类的继承,多态,抽象类与接口
    equals()与 == 比较,hashCode方法
    面向对象基本知识
    命令控制台与java环境配置
  • 原文地址:https://www.cnblogs.com/swt-axios/p/12905673.html
Copyright © 2011-2022 走看看