Select All Button with checkbox-CodePudding

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 function checkAll.

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 < 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 < 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";
}

<body onl oad='hideTotal()'>
    <div id="all">
        <form action="/action_page.php" id="energyform" onsubmit="return false;">
        <div>
            <div >
               <fieldset>
                <legend>Carbon Footprint Calculator</legend>
                <label >Number of Person Live in Household</label><br/>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person1" onclick="calculateTotal()" />1&nbsp</label>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person2" onclick="calculateTotal()" />2&nbsp</label>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person3" onclick="calculateTotal()" />3&nbsp</label>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person4" onclick="calculateTotal()" />4&nbsp</label>
                <label class='radiolabel'><input type="radio"  name="selectedperson" value="person5" onclick="calculateTotal()" />5&nbsp</label>
<br/><br/>
                <label><i ></i>Energy Consumption Per Month</label>
<br/>
                <label>&nbspElectricity&nbsp&nbsp&nbsp&nbsp</label>
                <select id="electricity" name='electricity' onchange="calculateTotal()">
                <option value="elecuse">0</option>
                <option value="elec1">100</option>
                <option value="elec2">200</option>
                <option value="elec3">300</option>
                <option value="elec4">400</option>
                <option value="elec5">500</option>
                <option value="elec6">600</option>
                <option value="elec7">700</option>
                <option value="elec8">800</option>
                <option value="elec9">900</option>
                </select>
<br/><br/>
                <label><i ></i>Recycle </label>
<br/>
                <label for='yesalu' >&nbspAluminium and Steel&nbsp&nbsp</label>
                <input type="checkbox" id="yesalu" name='yesalu' onclick="calculateTotal()" />
<br/>
                <label for='yesplas' >&nbspPlastic&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label>
                <input type="checkbox" id="yesplas" name='yesplas' onclick="calculateTotal()" />
<br/>
                <button type="button" id="blockSelectAll" onclick="checkAll()" >Select All</button>   
<br/>
                <p>Total CO2 produced per year per household:</p>
                <div id="totalConsumption">0</div>
                </fieldset>
            </div>
            
            <input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
            <input type='reset' id='reset' value='Reset' onclick="hideTotal()" />
        </div>  
       </form>
                    </div>

</body>

CodePudding user response：

function checkAllRecycles() {
    const recycleBoxes = document.getElementsByName('recycle');

  if (recycleBoxes) {
    recycleBoxes.forEach((recycleBox) => {
      if (!recycleBox.checked) {
        recycleBox.checked = 'checked';
      }
    })
  }
}

This should get it working. First get all checkboxes. I recommend using names so you will get only the ones you are wishing to check. If you want to check all checkboxes on the page you can select all with document.querySelectorAll('input[type="checkbox"].