title: Javascript - Select All Checkboxes & Change Multiple Classes Function
body: <p>I have ran into a problem I'm not sure the correct answer to. I have a javascript code where I want to select every checkbox on the page and replace the <em>.absent</em> CSS class with <em>.present</em> for every element that has the classes <em>.tile</em> AND <em>.absent</em>. What I'm seeing is that this works, but the user has to repeatedly call the function in order for this to select every applicable element on the page as it should. Why does it not just select every element the first time?</p>
  <p>If the first paragraph did not make sense, my goal is for the function to work as follows: When the user clicks &quot;Mark All Present&quot; every tile should light up purple on the page.</p>
  <p>Codepin: <a href="https://codepen.io/dansbyt/pen/yLVzJog" rel="nofollow noreferrer">https://codepen.io/dansbyt/pen/yLVzJog</a></p>
  <p>Javascript:</p>
  <pre><code>function selectall(arg){
    if (arg == 'selectmulti') {var check = document.getElementsByClassName(&quot;clickable&quot;);}
    if (arg == 'attendance') {
      var check = document.getElementsByTagName('input');
      var tile = document.getElementsByClassName('tile absent');
      for(i=0; i&lt;tile.length; i++){
        tile[i].classList.add('present');
        tile[i].classList.remove('absent');
      }
    }
    for(i=0; i&lt;check.length; i++){
      if(check[i].type=='checkbox'){
        check[i].checked=true;
      }
    }
  }
  
  
  function deselectall(arg){
    if (arg == 'attendance') {var uncheck = document.getElementsByTagName('input');}
    if (arg == 'selectmulti') {var uncheck = document.getElementsByClassName(&quot;clickable&quot;);}
    for(i=0; i&lt;uncheck.length; i++){
      if(uncheck[i].type=='checkbox'){
        uncheck[i].checked=false;
      }
    }
  }
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;div id='grid'&gt;
    &lt;input type='checkbox' id='1' value='1' disabled&gt;
    &lt;label for='1'&gt;
      &lt;div class='tile absent'&gt;
        &lt;img class='tile_pic' src='../resources/pics/default.png'&gt;
        &lt;div class='tile_title'&gt;John Doe&lt;/div&gt;
      &lt;/div&gt;
    &lt;/label&gt;
    
    &lt;input type='checkbox' id='2' value='2' disabled&gt;
    &lt;label for='2'&gt;
      &lt;div class='tile absent'&gt;
        &lt;img class='tile_pic' src='../resources/pics/1/22.jpg'&gt;
        &lt;div class='tile_title'&gt;Kennedy Adam&lt;/div&gt;
      &lt;/div&gt;
    &lt;/label&gt;
    
    &lt;input type='checkbox' class='clickable' id='3' value='3' disabled&gt;
    &lt;label for='3'&gt;
      &lt;div class='tile present'&gt;
        &lt;img class='tile_pic' src='../resources/pics/1/19.jpg'&gt;
        &lt;div class='tile_title'&gt;Sawyer Tom&lt;/div&gt;
      &lt;/div&gt;
    &lt;/label&gt;
  
    &lt;input type='checkbox' id='4' value='4' disabled&gt;
    &lt;label for='4'&gt;
      &lt;div class='tile absent'&gt;
        &lt;img class='tile_pic' src='../resources/pics/1/22.jpg'&gt;
        &lt;div class='tile_title'&gt;Linny Baker&lt;/div&gt;
      &lt;/div&gt;
    &lt;/label&gt;
  
    &lt;input type='checkbox' class='clickable' id='5' value='5' disabled&gt;
    &lt;label for='5'&gt;
      &lt;div class='tile present'&gt;
        &lt;img class='tile_pic' src='../resources/pics/1/19.jpg'&gt;
        &lt;div class='tile_title'&gt;Patrick MeLoy&lt;/div&gt;
      &lt;/div&gt;
    &lt;/label&gt;
    
    &lt;input type='checkbox' id='6' value='6' disabled&gt;
    &lt;label for='6'&gt;
      &lt;div class='tile absent'&gt;
        &lt;img class='tile_pic' src='../resources/pics/default.png'&gt;
        &lt;div class='tile_title'&gt;Cyrus Everdeen&lt;/div&gt;
      &lt;/div&gt;
    &lt;/label&gt;
    
    &lt;input type='checkbox' id='7' value='7' disabled&gt;
    &lt;label for='7'&gt;
      &lt;div class='tile absent'&gt;
        &lt;img class='tile_pic' src='../resources/pics/1/22.jpg'&gt;
        &lt;div class='tile_title'&gt;Samuel Adams&lt;/div&gt;
      &lt;/div&gt;
    &lt;/label&gt;
    
    &lt;input type='checkbox' class='clickable' id='8' value='8' disabled&gt;
    &lt;label for='8'&gt;
      &lt;div class='tile present'&gt;
        &lt;img class='tile_pic' src='../resources/pics/1/19.jpg'&gt;
        &lt;div class='tile_title'&gt;Robert Paine&lt;/div&gt;
      &lt;/div&gt;
    &lt;/label&gt;
  
    &lt;input type='checkbox' id='9' value='9' disabled&gt;
    &lt;label for='9'&gt;
      &lt;div class='tile absent'&gt;
        &lt;img class='tile_pic' src='../resources/pics/1/22.jpg'&gt;
        &lt;div class='tile_title'&gt;Thomas Preston&lt;/div&gt;
      &lt;/div&gt;
    &lt;/label&gt;
  
    &lt;input type='checkbox' class='clickable' id='10' value='10' disabled&gt;
    &lt;label for='10'&gt;
      &lt;div class='tile present'&gt;
        &lt;img class='tile_pic' src='../resources/pics/1/19.jpg'&gt;
        &lt;div class='tile_title'&gt;Trae Smith&lt;/div&gt;
      &lt;/div&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  &lt;br&gt;&lt;br&gt;
          &lt;div class=&quot;attendance&quot;&gt;
            &lt;ul&gt;
              &lt;ul class=&quot;left&quot;&gt;
                &lt;li&gt; &lt;a class=&quot;deselectall&quot; onclick=&quot;deselectall('attendance')&quot;&gt; Mark All Absent &lt;/a&gt; &lt;/li&gt;
                &lt;li&gt; &lt;a class=&quot;selectall&quot; onclick=&quot;selectall('attendance')&quot;&gt; Mark All Present &lt;/a&gt; &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>body {margin: 120px 25px 55px 25px}
  
  #grid {
    max-width: 1880px;
    margin: 0 auto;
    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:not(.absent) {background-color: #BFB3E6; 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: #9885D6; 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); }}
  
  </code></pre>