#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

    @胡子大哈 哈哈哈 谢谢~


  • 3

    @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

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


登录后回复
 

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