全选带复选框的按钮

Question

如何更正选择按钮，因为如果我选择它，什么都不会发生。 必须单击选定的按钮，然后单击其他才会显示输出。 如何通过单击一次来显示输出。 该按钮的主要代码是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 onload='hideTotal()'> <div id="all"> <form action="/action_page.php" id="energyform" onsubmit="return false;"> <div> <div class="cont_order"> <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 class="fa fa-flash"></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 class="fa fa-flash"></i>Recycle </label> <br/> <label for='yesalu' class="alu">&nbspAluminium and Steel&nbsp&nbsp</label> <input type="checkbox" id="yesalu" name='yesalu' onclick="calculateTotal()" /> <br/> <label for='yesplas' class="plas">&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()" class="secondary">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>

Answer 1

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

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

这应该让它工作。 首先获取所有复选框。 我建议使用名称，这样您就只会得到您想要检查的名称。 如果要检查页面上的所有复选框，可以使用document.querySelectorAll('input[type="checkbox"]选择所有复选框。

全选带复选框的按钮

问题描述

1 个解决方案

解决方案1
0 2022-07-19 05:44:01

全选带复选框的按钮

问题描述

1 个解决方案

解决方案1 0 2022-07-19 05:44:01

解决方案1
0 2022-07-19 05:44:01