#62 全选和不选


  • 0
    administrators

    现在页面上有很多 checkbox,有一个 id 为 check-all 的 checkbox 表示全选。check-all 的勾选状态和其他的 checkbox 的状态紧密关联:

    1. 勾选了 check-all 表示全部选中其他 checkbox,不勾选 check-all 表示全部不选。
    2. 在勾选了 check-all 以后,再把其他任意 checkbox 去掉勾选,那么 check-all 也该也去掉勾选,因为已经不是全部选中了。
    3. 在不勾选 check-all 的情况下,其他的 checkbox 被手动一个个选中了,那么 check-all 也应该被选中。

    请你完成 initCheckBox 函数,可以初始化上述功能。


  • 0

    此回复已被删除!

  • 0
    administrators

    @TB 代码样式可以用 markdown 语法包裹起来,:P


  • 1

    function initCheckBox (elementId,allId,itemCLassNmae) {
      let container = elementId ? document.getElementById(elementId) : document,
          all = allId ? document.getElementById(allId) : document.getElementById("check-all"),
          itemArr = itemCLassNmae ? document.getElementsByClassName(itemCLassNmae) : document.getElementsByClassName("check-item")
      
      //全选/取消全选
      function checkAll (status) {
        for(item of itemArr) {
          item.checked = status
        }
      }
      
      //检索是否全部选中
      function checkUp () {
        let symbol = true;
        for(let i=0 ; i<itemArr.length ; i++){
            if(!itemArr.item(i).checked) 
                symbol = false
        }
        return symbol
      }
    
      all.addEventListener("click",()=>{
        checkAll(event.target.checked)
      })
    
      for(item of itemArr) {
          item.addEventListener("click",()=>{
            all.checked = (checkUp())      
          })
      }
    }
    

  • 0

    @胡子大哈 哈哈哈 谢谢~


  • 7

    @TB 其实可以更短一些的

    function initCheckBox(checkAll = document.querySelector('#check-all'), options = Array.from(document.querySelectorAll('.check-item'))) {
      checkAll.addEventListener('change', () => options.forEach(x => x.checked = checkAll.checked))
      options.forEach(o => o.addEventListener('change', update => checkAll.checked = options.every(x => x.checked)))
    }
    

  • 0

    @CodeHz 哈哈受教了 刚发现这里,刷了几个题发现需要提高的地方还很多呀,很棒的网站,赞一个!


  • 0

    一味求短无意义,我觉得这个短的代码还不如上面那个好,性能都差不多,分条写开可读性,扩展性都强很多


  • 0

    @浮生 逻辑理清楚并不需要长篇大论。。
    仔细看函数体里的两行,每一行代表一个逻辑
    第一行,是否全选标志的变化->全部选项的状态=全选的状态
    第二行,某个选项的变化->是否全选=是否所有选项都被选
    写的长反而让逻辑变得不清晰了,事件绑定与逻辑的描述相隔一段距离


  • 0

        var aList = document.getElementsByClassName("check-item"),
            oAll = document.getElementById("check-all");
        for (var i = 0, length = aList.length; i < length; i++) {
            (function (i) {
                aList[i].onclick = function () {
                    var bool = true;
                    for (var k = 0; k < length; k++) {
                        if (!aList[k].checked) {
                            bool = false;
                            break;
                        }
                    }
                    oAll.checked = bool;
                };
            })(i)
        }
        oAll.onclick = function () {
            for (var j = 0; j < length; j++) {
                aList[j].checked = !aList[j].checked
            }
        };

  • 0

    @TB#62 全选和不选 中说:

    function initCheckBox (elementId,allId,itemCLassNmae) {
      let container = elementId ? document.getElementById(elementId) : document,
          all = allId ? document.getElementById(allId) : document.getElementById("check-all"),
          itemArr = itemCLassNmae ? document.getElementsByClassName(itemCLassNmae) : document.getElementsByClassName("check-item")
      
      //全选/取消全选
      function checkAll (status) {
        for(item of itemArr) {
          item.checked = status
        }
      }
      
      //检索是否全部选中
      function checkUp () {
        let symbol = true;
        for(let i=0 ; i<itemArr.length ; i++){
            if(!itemArr.item(i).checked) 
                symbol = false
        }
        return symbol
      }
    
      all.addEventListener("click",()=>{
        checkAll(event.target.checked)
      })
    
      for(item of itemArr) {
          item.addEventListener("click",()=>{
            all.checked = (checkUp())      
          })
      }
    }
    

  • 0

    function initCheckBox () {
    /* TODO */
    let all = document.getElementById('check-all');
    let item = document.getElementsByClassName('check-item');
    all.onclick = function() {
    for (let v of item) {
    v.checked = this.checked;
    }
    }
    for (let v of item) {
    v.onclick = function(){
    forOf() ? all.checked = true : all.checked = false;
    }
    }
    let forOf = ()=>{
    let count = 0;
    for (let v of item) {
    if (v.checked) {
    count++
    }
    }
    if (count == item.length) {
    return true;
    }
    return false;
    }
    }


  • 0

    document.getElementById("check-all").onclick = function(event){
            event = event || widow.event;
            var target = event.target || event.elementSrc;
            [].slice.call(document.getElementsByClassName("check-item")).map(function(item){            
                item.checked = target.checked;
            });
        };
        [].slice.call(document.getElementsByClassName("check-item")).map(function(dom){
            dom.onclick = function(event){        
                var checkedSum = 0;
                [].slice.call(document.getElementsByClassName("check-item")).map(function(item){            
                    if(item.checked)
                        checkedSum++;
                });
                if(checkedSum == document.getElementsByClassName("check-item").length)
                {
                    document.getElementById("check-all").checked = true;
                }else{
                    document.getElementById("check-all").checked = false;
                }
            }
        });
    

  • 0

    不能用jQuery都不会写了,还是参考了他们的写的

     var li = document.getElementsByClassName("check-item"),
               all = document.getElementById("check-all");
    
       for (let i = 0; i < li.length; i++) {
               li[i].onclick = function () {
                   let bool = true;
                   for (let j = 0; j < li.length; j++) {
                       if (!li[j].checked) {
                           bool = false;
                       }
                   }
                   all.checked = bool;
               };
       }
    
       all.onclick = function () {
           for (let k = 0; k < li.length; k++) {
               li[k].checked = all.checked;
           }
       };
    }
    

  • 0

     var OLi= document.getElementById("check-all");
        var OLis=document.getElementsByClassName("check-item");
        var num=0;
        OLi.onclick=function(){
            if(this.checked){
                var bool=true;
                for(var i=0;i<OLis.length;i++){
                    OLis[i].checked=bool;
                }
                num=OLis.length;
            }else{
                var bool=false;
                for(var i=0;i<OLis.length;i++){
                    OLis[i].checked=bool;
                } 
                num=0;
            }
        }
    
    
        for(var i=0;i<OLis.length;i++){
            OLis[i].onclick=function(){
                if(this.checked){
                    num++
                }else{
                    num--
                }
                console.log(num)
               if(num==OLis.length){
                    OLi.checked=true;
               }else{
                    OLi.checked=false;
               }
            }
        }
    

    新手小白 求大神指教


  • 0

    function initCheckBox () {
    var checkboxAll = document.getElementById('check-all');
    var checkboxItems = document.querySelectorAll('input.check-item');
    checkboxAll.addEventListener('click',function(e){
    for (var i = 0; i < checkboxItems.length; i++) {
    checkboxItems[i].checked = this.checked;
    }
    });
    for (var i = 0; i < checkboxItems.length; i++) {
    checkboxItems[i].addEventListener('change',function(e){
    checkboxAll.checked = document.querySelectorAll('.check-item:checked').length === 6;
    });
    }
    }


  • 0

    function initCheckBox () {
            var checkboxAll = document.getElementById('check-all');
            var checkboxItems = document.querySelectorAll('input.check-item');
            checkboxAll.addEventListener('click',function(e){
              for (var i = 0; i < checkboxItems.length; i++) {
                checkboxItems[i].checked = this.checked;
              }
            });
            for (var i = 0; i < checkboxItems.length; i++) {
              checkboxItems[i].addEventListener('change',function(e){
                checkboxAll.checked = document.querySelectorAll('.check-item:checked').length === 6;
              });
            }
    }
    
    
    
    
    

  • 0

    function initCheckBox () {
      var oCheckAll = document.getElementById('check-all');
      var aCheckItem = document.querySelectorAll('.check-item');
      oCheckAll.onchange = function(e){
        for(var i = 0;i<aCheckItem.length;i++){
        	if(e.target.checked){
        		aCheckItem[i].checked = true;
        	}else{
        		aCheckItem[i].checked = false;
        	}	
        }
      }
       for(let i = 0;i<aCheckItem.length;i++){
    		let a = aCheckItem[i];
    		aCheckItem[i].onchange = function(e){
    			if(!e.target.checked){
    				oCheckAll.checked = false;
    			}
    			oCheckAll.checked = Array.from(aCheckItem).every(x=> x.checked)
    		}  	
    	}
    }
    

登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待