title: Select All Button with checkbox
body: <p>How to correct the select button because if i choose it nothing will happened. It must be click the selected button then click other just will show the output. How to show the output by just clicking one time. The main code for the button is <code>function checkAll</code>.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var person = [];
  person["person1"]=1; 
  person["person2"]=2;
  person["person3"]=3;
  person["person4"]=4;
  person["person5"]=5;
  
  var elec = [];
  elec["elecuse"] = 0;
  elec["elec1"] = 100*454.58;
  elec["elec2"] = 200*454.58;
  elec["elec3"] = 300*454.58;
  elec["elec4"] = 400*454.58;
  elec["elec5"] = 500*454.58;
  elec["elec6"] = 600*454.58;
  elec["elec7"] = 700*454.58;
  elec["elec8"] = 800*454.58;
  elec["elec9"] = 900*454.58;
  
  function getNumberperson()
  {  
      var numberperson=0;
      var theForm = document.forms["energyform"];
      var selectedPerson = theForm.elements["selectedperson"];
      for(var i = 0; i &lt; selectedPerson.length; i++)
      {
          if(selectedPerson[i].checked)
          {
              numberperson = person[selectedPerson[i].value];
          }
      }
      return numberperson;
  }
  
  function getElectotal()
  {
      var electotal=0;
      var theForm = document.forms["energyform"];
      var selectedElec = theForm.elements["electricity"];     
      electotal = elec[selectedElec.value];
      return electotal;
  }
  
  function recyclealu()
  {
      var recyclealu=0;
      var theForm = document.forms["energyform"];
      var yesalu = theForm.elements["yesalu"];
  
      if(yesalu.checked==true)
      {
          recyclealu=-89.38;
      }
      return recyclealu;
  }
  
  function recycleplas()
  {
      var recycleplas=0;
      var theForm = document.forms["energyform"];
      var yesplas = theForm.elements["yesplas"];
  
      if(yesplas.checked==true)
      {
          recycleplas=-35.56;
      }
      return recycleplas;
  }
  
  function checkAll() {
       var checkboxes = document.getElementsByTagName('input');    
       for (var i = 0; i &lt; checkboxes.length; i++) {
           if (checkboxes[i].type == 'checkbox') {
               checkboxes[i].setAttribute('checked', true) // Or inputs[i].checked = true;
           }
       }
   }
   
  function calculateTotal()
  {
      var totalco = getNumberperson()*getElectotal() + recyclealu() + recycleplas();
      
      //display the result
  
      document.getElementById('totalConsumption').innerHTML = +totalco;
  
  }
  
  //add a function to hide the result on page loading at the start
  function hideTotal()
  {
      document.getElementById('totalConsumption').innerHTML = "0";
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body onload='hideTotal()'&gt;
      &lt;div id="all"&gt;
          &lt;form action="/action_page.php" id="energyform" onsubmit="return false;"&gt;
          &lt;div&gt;
              &lt;div class="cont_order"&gt;
                 &lt;fieldset&gt;
                  &lt;legend&gt;Carbon Footprint Calculator&lt;/legend&gt;
                  &lt;label &gt;Number of Person Live in Household&lt;/label&gt;&lt;br/&gt;
                  &lt;label class='radiolabel'&gt;&lt;input type="radio"  name="selectedperson" value="person1" onclick="calculateTotal()" /&gt;1&amp;nbsp&lt;/label&gt;
                  &lt;label class='radiolabel'&gt;&lt;input type="radio"  name="selectedperson" value="person2" onclick="calculateTotal()" /&gt;2&amp;nbsp&lt;/label&gt;
                  &lt;label class='radiolabel'&gt;&lt;input type="radio"  name="selectedperson" value="person3" onclick="calculateTotal()" /&gt;3&amp;nbsp&lt;/label&gt;
                  &lt;label class='radiolabel'&gt;&lt;input type="radio"  name="selectedperson" value="person4" onclick="calculateTotal()" /&gt;4&amp;nbsp&lt;/label&gt;
                  &lt;label class='radiolabel'&gt;&lt;input type="radio"  name="selectedperson" value="person5" onclick="calculateTotal()" /&gt;5&amp;nbsp&lt;/label&gt;
  &lt;br/&gt;&lt;br/&gt;
                  &lt;label&gt;&lt;i class="fa fa-flash"&gt;&lt;/i&gt;Energy Consumption Per Month&lt;/label&gt;
  &lt;br/&gt;
                  &lt;label&gt;&amp;nbspElectricity&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&lt;/label&gt;
                  &lt;select id="electricity" name='electricity' onchange="calculateTotal()"&gt;
                  &lt;option value="elecuse"&gt;0&lt;/option&gt;
                  &lt;option value="elec1"&gt;100&lt;/option&gt;
                  &lt;option value="elec2"&gt;200&lt;/option&gt;
                  &lt;option value="elec3"&gt;300&lt;/option&gt;
                  &lt;option value="elec4"&gt;400&lt;/option&gt;
                  &lt;option value="elec5"&gt;500&lt;/option&gt;
                  &lt;option value="elec6"&gt;600&lt;/option&gt;
                  &lt;option value="elec7"&gt;700&lt;/option&gt;
                  &lt;option value="elec8"&gt;800&lt;/option&gt;
                  &lt;option value="elec9"&gt;900&lt;/option&gt;
                  &lt;/select&gt;
  &lt;br/&gt;&lt;br/&gt;
                  &lt;label&gt;&lt;i class="fa fa-flash"&gt;&lt;/i&gt;Recycle &lt;/label&gt;
  &lt;br/&gt;
                  &lt;label for='yesalu' class="alu"&gt;&amp;nbspAluminium and Steel&amp;nbsp&amp;nbsp&lt;/label&gt;
                  &lt;input type="checkbox" id="yesalu" name='yesalu' onclick="calculateTotal()" /&gt;
  &lt;br/&gt;
                  &lt;label for='yesplas' class="plas"&gt;&amp;nbspPlastic&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&lt;/label&gt;
                  &lt;input type="checkbox" id="yesplas" name='yesplas' onclick="calculateTotal()" /&gt;
  &lt;br/&gt;
                  &lt;button type="button" id="blockSelectAll" onclick="checkAll()" class="secondary"&gt;Select All&lt;/button&gt;   
  &lt;br/&gt;
                  &lt;p&gt;Total CO2 produced per year per household:&lt;/p&gt;
                  &lt;div id="totalConsumption"&gt;0&lt;/div&gt;
                  &lt;/fieldset&gt;
              &lt;/div&gt;
              
              &lt;input type='submit' id='submit' value='Submit' onclick="calculateTotal()" /&gt;
              &lt;input type='reset' id='reset' value='Reset' onclick="hideTotal()" /&gt;
          &lt;/div&gt;  
         &lt;/form&gt;
                      &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>