JavaScript 中必须至少选择一个单选和复选框
[英]At least one radio and checkbox must be select in JavaScript
问题描述
how to validate all the section by at least choose one option 。 使用我的代码，它只显示第一个“请选择 1”。 那么如何编辑代码以at beside the section or below the submit button显示all requirement ，例如“请至少选择一个”。 我只是一个初学者，现在正在学习 JavaScript。 您更喜欢使用一些代码编辑器来完成，以便初学者更好地理解。 这是我的代码：
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 checkAllRecycles() { const recycleBoxes = document.querySelectorAll('input[type="checkbox"]'); if (recycleBoxes) { recycleBoxes.forEach((recycleBox) => { if (!recycleBox.checked) { recycleBox.checked = 'checked'; } }) } calculateTotal(); } 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"; } function vpeople() { var cp = document.getElementsByName('selectedperson'); for (var i = 0; i < cp.length; i++) { if (cp[i].type == 'radio') { if (cp[i].checked) {return true} } } return false; } function velec() { var ce = document.getElementsByName('electricity'); for (var i = 0; i < ce.length; i++) { if (ce[i].type == 'radio') { if (ce[i].checked) {return true} } } return false; } function vrcyalu() { var crcyalu = document.getElementsByName('yesalu'); for (var i = 0; i < crcyalu.length; i++) { if (crcyalu[i].type == 'checkbox') { if (crcyalu[i].checked) {return true} } } return false; } function vrcyplas() { var crcyplas = document.getElementsByName('yesalu'); for (var i = 0; i < crcyplas.length; i++) { if (crcyplas[i].type == 'checkbox') { if (crcyplas[i].checked) {return true} } } return false; } function allvalidate() { if(!vpeople()) { alert("Please select1"); return false; } return true; if(!vwaste()) { alert("Please select2"); return false; } return true; if(!velec()) { alert("Please select3"); return false; } return true; if(!vrcyalu()) { alert("Please select4"); return false; } return true; if(!vrcyplas()) { alert("Please select5"); return false; } return true; checkAllRecycles; }
<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 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person2" onclick="calculateTotal()" />2 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person3" onclick="calculateTotal()" />3 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person4" onclick="calculateTotal()" />4 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person5" onclick="calculateTotal()" />5 </label> <br/><br/> <label><i class="fa fa-flash"></i>Energy Consumption Per Month</label> <br/> <label> Electricity    </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"> Aluminium and Steel  </label> <input type="checkbox" id="yesalu" name='yesalu' onclick="calculateTotal()" /> <br/> <label for='yesplas' class="plas"> Plastic                          </label> <input type="checkbox" id="yesplas" name='yesplas' onclick="calculateTotal()" /> <br/> <button type="button" onclick="checkAllRecycles()">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="allvalidate()" /> <input type='reset' id='reset' value='Reset' onclick="hideTotal()" /> </div> </form> </div> </body>
非常感谢你帮助我，保持安全。
1 个解决方案
解决方案1
0 2022-07-20 16:35:17
您好，请查看此页面：
https://stackoverflow.com/questions/13060313/checking-if-at-least-one-radio-button-has-been-selected-javascript
如果至少选中了一个复选框并且带有复选框 select 全部，则启用按钮
[英]Enable button if at least one checkbox is selected and with checkbox select all
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.