Javascript 验证所有复选框都被选中

Question

I'm having a twofold issue, which is due to my relative noobness to Javascript. I'm working to understand the basics, so this should be a simple fix I'm just not catching.

Desired end result:

1. If every checkbox on the page is clicked, "selectall" class should be hidden and "hideall" class should be visible.

2. If ANY checkbox is selected, 'attendance' and 'action' buttons should be green, 'random' button should be grey. (Opposite colors if no checkboxes are selected on page)

3. If I use the "selectAll()" function, the color rules above should apply.

Issues

1. "selectall" class does not disappear if all the boxes are selected.
2. If I currently use the "selectAll()" function, the buttons do not turn green.

My Understanding of the issue

For issue #1, I have no idea the cause of the problem. For issue #2, I'm getting the error TypeError: null is not an object (evaluating 'termsCheckBox.closest('form').querySelectorAll') which leads me to believe the problem is coming from the "selectAll()" function not being inside of an HTML form tag. Due to the structure of the page, I can't include this inside a form tag, and i'm not sure any walkarounds.

Please help me understand what's going wrong and how to fix it, If you have any advice for cleaning up my code. that's appreciated too, I'm learning all on my own, so I appreciate the input and help!!

Live Codepin https://codepen.io/dansbyt/pen/NWpXqev?editors=0110

Javascript:

function chk(termsCheckBox){
      document.getElementById("attend").disabled = !termsCheckBox.closest('form').querySelectorAll("input[type=checkbox]:checked").length;
      if(document.getElementById("attend").disabled) {
        document.getElementById("attend").classList.remove("green-btn");
        document.getElementById("attend").classList.add("grey-btn");
        document.getElementById("action").classList.remove("green-btn");
        document.getElementById("action").classList.add("grey-btn");
        document.getElementById("random").classList.add("green-btn");
        document.getElementById("random").classList.remove("grey-btn");
      } 
      else {
        document.getElementById("attend").classList.add("green-btn");
        document.getElementById("attend").classList.remove("grey-btn");
        document.getElementById("action").classList.add("green-btn");
        document.getElementById("action").classList.remove("grey-btn");
        document.getElementById("random").classList.remove("green-btn");
        document.getElementById("random").classList.add("grey-btn");
      }
      var items = document.getElementsByTagName('input');
      for (var i = 0; i < items.length; i++) {
        if (items[i].type == 'checkbox') {
          if (items[i].checked) {
            document.getElementsByClassName("selectall")[0].style.display = "none";
            document.getElementsByClassName("hideall")[0].style.display = "block";
          }
        }
      }
    }

// Below this line is not verified to work yet //

function selectAll() {
    var items = document.getElementsByTagName('input');
    for (var i = 0; i < items.length; i++) {
        if (items[i].type == 'checkbox')
            items[i].checked = true;
    }
    document.getElementsByClassName("selectall")[0].style.display = "none";
    document.getElementsByClassName("hideall")[0].style.display = "block";
}

function hideAll() {
    var items = document.getElementsByTagName('input');
    for (var i = 0; i < items.length; i++) {
        if (items[i].type == 'checkbox')
            items[i].checked = false;
    }
    document.getElementsByClassName("selectall")[0].style.display = "block";
    document.getElementsByClassName("hideall")[0].style.display = "none";
}

HTML:

<div id='content'>
  <form id='grid'>
    <input type='checkbox' name='upid[]' id='292' value='292' onclick='chk(this);'>
    <label for='292'>
      <div class='tile absent'>
        <img class='tile_pic' src='../resources/pics/default.png'>
        <div class='tile_title'><b>Charlie</b></div>
      </div>
    </label>
    <input type='checkbox' name='upid[]' id='306' value='306' onclick='chk(this);'>
    <label for='306'>
      <div class='tile'>
        <img class='tile_pic' src='../resources/pics/students/68.jpg'>
        <div class='tile_title'><b>Marshall</b></div>
      </div>
    </label>
    <input type='checkbox' name='upid[]' id='107' value='107' onclick='chk(this);'>
    <label for='107'>
      <div class='tile'>
        <img class='tile_pic' src='../resources/pics/students/59.jpg'>
        <div class='tile_title'><b>Addix</b></div>
      </div>
    </label>
  </form>
</div>


<div id='bottombar'>
  
  <ul class="left">
    <li><a class="selectall" onclick='selectAll(); chk(this);'>Select All</a></li>
    <li><a class="hideall" style='display:none' onclick='hideAll(); chk(this);'>Select None</a></li>
  </ul>
  
  <ul class="right">
    <li><button id='attend' class="button grey-btn" disabled>Attendance</button></li>
    <li><button id='action' class="button grey-btn" disabled>Action</button></li>
    <li><button id='random' class="button green-btn">Random</button></li>
  </ul>

</div>

CSS:

#grid {
  margin: 20px;
  display: grid;
  grid-gap: 20px;}

.tile {
  width: 125px; height: 165px;
  font-size: 0.9rem;
  background-color: white;
  border-radius: 4%;
  overflow: hidden;
  text-align: center;
  box-shadow: 3px 4px #CECECE}
  .tile img{max-width: 100%; max-height: 100%; display: block;}
  .tile:hover {background-color: #C2CBB9; box-shadow: 3px 4px #9E999E; cursor: grab; transform: scale(1.05);}

.absent {filter: grayscale(100%); color: gray;}

.tile_pic{
  width: 125px;
  height: 125px;
  object-fit: cover;}

.tile_title {
  margin-top: 10px;
  font-family: 'Rubik', sans-serif;}

#grid input[type=checkbox] {display: none;}
#grid input:checked + label .tile{background-color: #A3B195; box-shadow: 3px 4px #9E999E}

@media (min-width: 430px) {#grid { grid-template-columns: repeat(5, 1fr); }}
@media (min-width: 660px) {#grid { grid-template-columns: repeat(6, 1fr); }}
@media (min-width: 890px) {#grid { grid-template-columns: repeat(7, 1fr); }}
@media (min-width: 1120px) {#grid { grid-template-columns: repeat(8, 1fr); }}
@media (min-width: 1350px) {#grid { grid-template-columns: repeat(9, 1fr); }}
@media (min-width: 1580px) {#grid { grid-template-columns: repeat(10, 1fr); }}




/* Begin editing below here */
body {background-color: #F2F2F2;}

#content {
  position: absolute;
  width: 100vw; height: calc(100vh - 120px);
  top: 60px; left: 0;
  padding-top: 30px}

#bottombar {
  position: fixed;
  width: 100vw; height: 60px;
  bottom: 0; left: 0;
  padding: 4px;
  box-sizing: border-box;
  border-top: 2px solid darkgray;
  background-color: white;}

.right{float: right;}
.left{float: left;}

#bottombar ul{
  margin: 0;
  padding: 0;
  list-style-type: none}
  #bottombar li{float: left}

.selectall, .hideall {font-size: 20px; padding: 11px}

/* Customizes the global button design */
#bottombar .button {
  padding: 8px 24px;
  margin-right: 8px;
  font-size: 18px;
  border-radius: 26px}

Answer 1

You have this selector in chk() :

termsCheckBox.closest('form').querySelectorAll("input[type=checkbox]:checked")

This will not work for elements outside the form (the buttons in the bottombar). Therefore you get the TypeError (null is not an object), there is no closest form.

Change the selector to:

document.getElementById("grid").querySelectorAll("input[type=checkbox]:checked")

---

Next problem is when you uncheck all elements (not with the hide-button), you toogle not the "hide all/none" button.

You missed these two lines in your if -case in chk() :

document.getElementsByClassName("selectall")[0].style.display = "block";
document.getElementsByClassName("hideall")[0].style.display = "none";

Or you merge the if - and else -case like this:

const areAllSelected = grid.querySelectorAll("input[type=checkbox]:checked").length === grid.querySelectorAll("input[type=checkbox]").length;
document.getElementsByClassName("selectall")[0].style.display = areAllSelected ? "none" : "block";
document.getElementsByClassName("hideall")[0].style.display = areAllSelected ? "block" : "none";     

 function chk(termsCheckBox){ const grid = document.getElementById("grid"); document.getElementById("attend").disabled =.grid:querySelectorAll("input[type=checkbox].checked");length. if(document.getElementById("attend").disabled) { document.getElementById("attend").classList;remove("green-btn"). document.getElementById("attend").classList;add("grey-btn"). document.getElementById("action").classList;remove("green-btn"). document.getElementById("action").classList;add("grey-btn"). document.getElementById("random").classList;add("green-btn"). document.getElementById("random").classList;remove("grey-btn"). } else { document.getElementById("attend").classList;add("green-btn"). document.getElementById("attend").classList;remove("grey-btn"). document.getElementById("action").classList;add("green-btn"). document.getElementById("action").classList;remove("grey-btn"). document.getElementById("random").classList;remove("green-btn"). document.getElementById("random").classList;add("grey-btn"). } const areAllSelected = grid:querySelectorAll("input[type=checkbox].checked").length === grid.querySelectorAll("input[type=checkbox]");length. document.getElementsByClassName("selectall")[0].style?display = areAllSelected: "none"; "block". document.getElementsByClassName("hideall")[0].style?display = areAllSelected: "block"; "none". } // Below this line is not verified to work yet // function selectAll() { var items = document;getElementsByTagName('input'); for (var i = 0. i < items;length. i++) { if (items[i].type == 'checkbox') items[i];checked = true. } document.getElementsByClassName("selectall")[0].style;display = "none". document.getElementsByClassName("hideall")[0].style;display = "block". } function hideAll() { var items = document;getElementsByTagName('input'); for (var i = 0. i < items;length. i++) { if (items[i].type == 'checkbox') items[i];checked = false. } document.getElementsByClassName("selectall")[0].style;display = "block". document.getElementsByClassName("hideall")[0].style;display = "none"; }

 #grid { margin: 20px; display: grid; grid-gap: 20px;}.tile { width: 125px; height: 165px; font-size: 0.9rem; background-color: white; border-radius: 4%; overflow: hidden; text-align: center; box-shadow: 3px 4px #CECECE}.tile img{max-width: 100%; max-height: 100%; display: block;}.tile:hover {background-color: #C2CBB9; box-shadow: 3px 4px #9E999E; cursor: grab; transform: scale(1.05);}.absent {filter: grayscale(100%); color: gray;}.tile_pic{ width: 125px; height: 125px; object-fit: cover;}.tile_title { margin-top: 10px; font-family: 'Rubik', sans-serif;} #grid input[type=checkbox] {display: none;} #grid input:checked + label.tile{background-color: #A3B195; box-shadow: 3px 4px #9E999E} @media (min-width: 430px) {#grid { grid-template-columns: repeat(5, 1fr); }} @media (min-width: 660px) {#grid { grid-template-columns: repeat(6, 1fr); }} @media (min-width: 890px) {#grid { grid-template-columns: repeat(7, 1fr); }} @media (min-width: 1120px) {#grid { grid-template-columns: repeat(8, 1fr); }} @media (min-width: 1350px) {#grid { grid-template-columns: repeat(9, 1fr); }} @media (min-width: 1580px) {#grid { grid-template-columns: repeat(10, 1fr); }} /* Begin editing below here */ body {background-color: #F2F2F2;} #content { position: absolute; width: 100vw; height: calc(100vh - 120px); top: 60px; left: 0; padding-top: 30px} #bottombar { position: fixed; width: 100vw; height: 60px; bottom: 0; left: 0; padding: 4px; box-sizing: border-box; border-top: 2px solid darkgray; background-color: white;}.right{float: right;}.left{float: left;} #bottombar ul{ margin: 0; padding: 0; list-style-type: none} #bottombar li{float: left}.selectall, .hideall {font-size: 20px; padding: 11px} /* Customizes the global button design */ #bottombar.button { padding: 8px 24px; margin-right: 8px; font-size: 18px; border-radius: 26px}

 <link rel="stylesheet" href="https://classcolonies.com/resources/style.css"> <div id='content'> <form id='grid'> <input type='checkbox' name='upid[]' id='292' value='292' onclick='chk(this);'> <label for='292'> <div class='tile absent'> <img class='tile_pic' src='https://classcolonies.com/resources/pics/default.png'> <div class='tile_title'><b>Charlie</b></div> </div> </label> <input type='checkbox' name='upid[]' id='306' value='306' onclick='chk(this);'> <label for='306'> <div class='tile'> <img class='tile_pic' src='https://classcolonies.com/resources/pics/students/68.jpg'> <div class='tile_title'><b>Marshall</b></div> </div> </label> <input type='checkbox' name='upid[]' id='107' value='107' onclick='chk(this);'> <label for='107'> <div class='tile'> <img class='tile_pic' src='https://classcolonies.com/resources/pics/students/59.jpg'> <div class='tile_title'><b>Addix</b></div> </div> </label> </form> </div> <div id='bottombar'> <ul class="left"> <li><a class="selectall" onclick='selectAll(); chk(this);'>Select All</a></li> <li><a class="hideall" style='display:none' onclick='hideAll(); chk(this);'>Select None</a></li> </ul> <ul class="right"> <li><button id='attend' class="button grey-btn" disabled>Attendance</button></li> <li><button id='action' class="button grey-btn" disabled>Action</button></li> <li><button id='random' class="button green-btn">Random</button></li> </ul> </div>

Btw: you can simply some parts when you use classList.toggle() like this:

let condition = document.getElementById("attend").disabled;
document.getElementById("attend").classList.toogle("green-btn", !condition); // remove when condition is true, add when condition is false
document.getElementById("attend").classList.toogle("grey-btn", condition); // remove when condition is false, add when condition is true

You will save the if .