I wanna add on two buttons
which can function as selecting all the radio buttons
according to the respective type. I want the buttons to select either all Yes
radio buttons or all No
buttons accordingly.
I would appreciate if anyone could help me to solve this. Prefers JavaScript instead of jQuery.
function Calc() { var arr = document.getElementsByName('qty'); var tot = 0; for (var i = 0; i < arr.length; i++) { var radios = document.getElementsByName("group" + (i + 1)); for (var j = 0; j < radios.length; j++) { var radio = radios[j]; if (radio.value == "Yes" && radio.checked) { tot += parseInt(arr[i].value); } } } //Display the total value of test points document.getElementById('total').value = tot; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="showdata" align="center"></div> <form id="radioForm" method="get" align="center"> <table style="width:60% table-layout:fixed" align="center"> <!--Attributes of table. Colspan used to insert sub-title for the main title.--> <h3> <B>Initial (On Arrival)</B> </h3> <table class="table1" style="width:60%" align="center"> <tr> <th>Test Points</th> <th colspan="4">Cycle-Time (Seconds)</th> </tr> <tr> <td></td> <td class="cent"><b>Value</b></td> <td class="cent"><b>Yes</b></td> <td class="cent"><b>No</b></td> </tr> <tr> <label id="group1"> <!--label is used to control the respective group of radio buttons--> <td>Initial (On Arrival)</td> <!--The input box in the 'Value' column is set as below--> <td class="cent"><input type="text" value="19" align="center" name="qty" id="qty1" maxlength="6" size="4"/></td> <!--The check boxes of 'Yes' and 'No' is created as below--> <td class="cent"><input type="radio" name="group1" value="Yes"></td> <td class="cent"><input type="radio" name="group1" value="No"></td> </label> </tr> <tr> <label id="group2"> <td>Drop Test (Portable Only)</td> <td class="cent"><input type="text" value="60" align="center" name="qty" id="qty2" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group2" value="Yes"></td> <td class="cent"><input type="radio" name="group2" value="No"></td> </label> </tr> <tr> <label id="group3"> <td>Power Up Test (Mobile Only)</td> <td class="cent"><input type="text" value="0" align="center" name="qty" id="qty3" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group3" value="Yes"></td> <td class="cent"><input type="radio" name="group3" value="No"></td> </label> </tr> <tr> <label id="group4"> <td>User Interface Room</td> <td class="cent"><input type="text" value="161" align="center" name="qty" id="qty4" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group4" value="Yes"></td> <td class="cent"><input type="radio" name="group4" value="No"></td> </label> </tr> </table> <br><br> <h3> <B>Extreme Temperature (Cold Temp)</B> </h3> <table class="table2" style="width:60%" align="center"> <tr> <th>Test Points</th> <th colspan="4">Cycle-Time (Seconds)</th> </tr> <tr> <td></td> <td class="cent"><b>Value</b></td> <td class="cent"><b>Yes</b></td> <td class="cent"><b>No</b></td> </tr> <tr> <label id="group5"> <td>ATE Labview RF Testing Extreme</td> <td class="cent"><input type="text" value="153" align="center" name="qty" id="qty5" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group5" value="Yes"></td> <td class="cent"><input type="radio" name="group5" value="No"></td> </label> </tr> <tr> <label id="group6"> <td>User Interface Extreme</td> <td class="cent"><input type="text" value="161" align="center" name="qty" id="qty6" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group6" value="Yes"></td> <td class="cent"><input type="radio" name="group6" value="No"></td> </label> </tr> <tr> <label id="group7"> <td>Mic Talk Internal Extreme</td> <td class="cent"><input type="text" value="68" align="center" name="qty" id="qty7" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group7" value="Yes"></td> <td class="cent"><input type="radio" name="group7" value="No"></td> </label> </tr> <tr> <label id="group8"> <td>Mic Talk External Extreme</td> <td class="cent"><input type="text" value="53" align="center" name="qty" id="qty8" maxlength="4" size="4" /></td> <td class="cent"><input type="radio" name="group8" value="Yes"></td> <td class="cent"><input type="radio" name="group8" value="No"></td> </label> </tr> <tr> <label id="group9"> <td>Desense Test</td> <td class="cent"><input type="text" value="50" align="center" name="qty" id="qty9" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group9" value="Yes"></td> <td class="cent"><input type="radio" name="group9" value="No"></td> </label> </tr> <tr> <label id="group10"> <td>Tx Stability</td> <td class="cent"><input type="text" value="43" align="center" name="qty" id="qty10" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group10" value="Yes"></td> <td class="cent"><input type="radio" name="group10" value="No"></td> </label> </tr> <tr> <label id="group11"> <td>Microphonic Test</td> <td class="cent"><input type="text" value="60" align="center" name="qty" id="qty11" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group11" value="Yes"></td> <td class="cent"><input type="radio" name="group11" value="No"></td> </label> </tr> </table> <br><br> <button type="button" name="selectYes">Select All Yes</button> <button type="button" name="selectNo">Select All No</button> <br><br> </table> </form> <table class="resultsTbl" align="center"> <tr> <td>Total</td> <td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td> </tr> </table>
You can use the following function:
function selectAll(value) {
var elements = document.querySelectorAll("input[value=" + value + "]");
elements.forEach(function(element, index) {
element.checked = true;
});
}
function Calc() { var arr = document.getElementsByName('qty'); var tot = 0; for (var i = 0; i < arr.length; i++) { var radios = document.getElementsByName("group" + (i + 1)); for (var j = 0; j < radios.length; j++) { var radio = radios[j]; if (radio.value == "Yes" && radio.checked) { tot += parseInt(arr[i].value); } } } //Display the total value of test points document.getElementById('total').value = tot; } function selectAll(value) { var elements = document.querySelectorAll("input[value=" + value + "]"); elements.forEach(function(element, index) { element.checked = true; }); } document.getElementById("selectYes").addEventListener("click", function() { selectAll("Yes"); }); document.getElementById("selectNo").addEventListener("click", function() { selectAll("No"); });
<div id="showdata" align="center"></div> <form id="radioForm" method="get" align="center"> <table style="width:60% table-layout:fixed" align="center"> <!--Attributes of table. Colspan used to insert sub-title for the main title.--> <h3> <B>Initial (On Arrival)</B> </h3> <table class="table1" style="width:60%" align="center"> <tr> <th>Test Points</th> <th colspan="4">Cycle-Time (Seconds)</th> </tr> <tr> <td></td> <td class="cent"><b>Value</b></td> <td class="cent"><b>Yes</b></td> <td class="cent"><b>No</b></td> </tr> <tr> <label id="group1"> <!--label is used to control the respective group of radio buttons--> <td>Initial (On Arrival)</td> <!--The input box in the 'Value' column is set as below--> <td class="cent"><input type="text" value="19" align="center" name="qty" id="qty1" maxlength="6" size="4"/></td> <!--The check boxes of 'Yes' and 'No' is created as below--> <td class="cent"><input type="radio" name="group1" value="Yes"></td> <td class="cent"><input type="radio" name="group1" value="No"></td> </label> </tr> <tr> <label id="group2"> <td>Drop Test (Portable Only)</td> <td class="cent"><input type="text" value="60" align="center" name="qty" id="qty2" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group2" value="Yes"></td> <td class="cent"><input type="radio" name="group2" value="No"></td> </label> </tr> <tr> <label id="group3"> <td>Power Up Test (Mobile Only)</td> <td class="cent"><input type="text" value="0" align="center" name="qty" id="qty3" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group3" value="Yes"></td> <td class="cent"><input type="radio" name="group3" value="No"></td> </label> </tr> <tr> <label id="group4"> <td>User Interface Room</td> <td class="cent"><input type="text" value="161" align="center" name="qty" id="qty4" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group4" value="Yes"></td> <td class="cent"><input type="radio" name="group4" value="No"></td> </label> </tr> </table> <br><br> <h3> <B>Extreme Temperature (Cold Temp)</B> </h3> <table class="table2" style="width:60%" align="center"> <tr> <th>Test Points</th> <th colspan="4">Cycle-Time (Seconds)</th> </tr> <tr> <td></td> <td class="cent"><b>Value</b></td> <td class="cent"><b>Yes</b></td> <td class="cent"><b>No</b></td> </tr> <tr> <label id="group5"> <td>ATE Labview RF Testing Extreme</td> <td class="cent"><input type="text" value="153" align="center" name="qty" id="qty5" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group5" value="Yes"></td> <td class="cent"><input type="radio" name="group5" value="No"></td> </label> </tr> <tr> <label id="group6"> <td>User Interface Extreme</td> <td class="cent"><input type="text" value="161" align="center" name="qty" id="qty6" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group6" value="Yes"></td> <td class="cent"><input type="radio" name="group6" value="No"></td> </label> </tr> <tr> <label id="group7"> <td>Mic Talk Internal Extreme</td> <td class="cent"><input type="text" value="68" align="center" name="qty" id="qty7" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group7" value="Yes"></td> <td class="cent"><input type="radio" name="group7" value="No"></td> </label> </tr> <tr> <label id="group8"> <td>Mic Talk External Extreme</td> <td class="cent"><input type="text" value="53" align="center" name="qty" id="qty8" maxlength="4" size="4" /></td> <td class="cent"><input type="radio" name="group8" value="Yes"></td> <td class="cent"><input type="radio" name="group8" value="No"></td> </label> </tr> <tr> <label id="group9"> <td>Desense Test</td> <td class="cent"><input type="text" value="50" align="center" name="qty" id="qty9" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group9" value="Yes"></td> <td class="cent"><input type="radio" name="group9" value="No"></td> </label> </tr> <tr> <label id="group10"> <td>Tx Stability</td> <td class="cent"><input type="text" value="43" align="center" name="qty" id="qty10" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group10" value="Yes"></td> <td class="cent"><input type="radio" name="group10" value="No"></td> </label> </tr> <tr> <label id="group11"> <td>Microphonic Test</td> <td class="cent"><input type="text" value="60" align="center" name="qty" id="qty11" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group11" value="Yes"></td> <td class="cent"><input type="radio" name="group11" value="No"></td> </label> </tr> </table> <br><br> <button type="button" name="selectYes" id="selectYes">Select All Yes</button> <button type="button" name="selectNo" id="selectNo">Select All No</button> <br><br> </table> </form> <table class="resultsTbl" align="center"> <tr> <td>Total</td> <td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td> </tr> </table>
On click of the buttons, you can call the below function which will toggle the selection of radio buttons Yes/No based on the parameters passed.
The code gets the HTML collection of all radio buttons having type='radio'
and value='Yes'
or value='No'
using querySelectorAll
, then convert the HTML element collection to array using slice
. Then updates the checked
property to true
using Map
method.
function selectAll(value){
var ele = [].slice.call(document.querySelectorAll("[type='radio'][value='" + value + "']"))
.map(function (el) { el.checked = true; });
}
function selectAll(value){ var ele = [].slice.call(document.querySelectorAll("[type='radio'][value='" + value + "']")) .map(function (el) { el.checked = true; }); }
<div id="showdata" align="center"></div> <form id="radioForm" method="get" align="center"> <table style="width:60% table-layout:fixed" align="center"> <!--Attributes of table. Colspan used to insert sub-title for the main title.--> <h3> <B>Initial (On Arrival)</B> </h3> <table class="table1" style="width:60%" align="center"> <tr> <th>Test Points</th> <th colspan="4">Cycle-Time (Seconds)</th> </tr> <tr> <td></td> <td class="cent"><b>Value</b></td> <td class="cent"><b>Yes</b></td> <td class="cent"><b>No</b></td> </tr> <tr> <label id="group1"> <!--label is used to control the respective group of radio buttons--> <td>Initial (On Arrival)</td> <!--The input box in the 'Value' column is set as below--> <td class="cent"><input type="text" value="19" align="center" name="qty" id="qty1" maxlength="6" size="4"/></td> <!--The check boxes of 'Yes' and 'No' is created as below--> <td class="cent"><input type="radio" name="group1" value="Yes"></td> <td class="cent"><input type="radio" name="group1" value="No"></td> </label> </tr> <tr> <label id="group2"> <td>Drop Test (Portable Only)</td> <td class="cent"><input type="text" value="60" align="center" name="qty" id="qty2" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group2" value="Yes"></td> <td class="cent"><input type="radio" name="group2" value="No"></td> </label> </tr> <tr> <label id="group3"> <td>Power Up Test (Mobile Only)</td> <td class="cent"><input type="text" value="0" align="center" name="qty" id="qty3" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group3" value="Yes"></td> <td class="cent"><input type="radio" name="group3" value="No"></td> </label> </tr> <tr> <label id="group4"> <td>User Interface Room</td> <td class="cent"><input type="text" value="161" align="center" name="qty" id="qty4" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group4" value="Yes"></td> <td class="cent"><input type="radio" name="group4" value="No"></td> </label> </tr> </table> <br><br> <h3> <B>Extreme Temperature (Cold Temp)</B> </h3> <table class="table2" style="width:60%" align="center"> <tr> <th>Test Points</th> <th colspan="4">Cycle-Time (Seconds)</th> </tr> <tr> <td></td> <td class="cent"><b>Value</b></td> <td class="cent"><b>Yes</b></td> <td class="cent"><b>No</b></td> </tr> <tr> <label id="group5"> <td>ATE Labview RF Testing Extreme</td> <td class="cent"><input type="text" value="153" align="center" name="qty" id="qty5" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group5" value="Yes"></td> <td class="cent"><input type="radio" name="group5" value="No"></td> </label> </tr> <tr> <label id="group6"> <td>User Interface Extreme</td> <td class="cent"><input type="text" value="161" align="center" name="qty" id="qty6" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group6" value="Yes"></td> <td class="cent"><input type="radio" name="group6" value="No"></td> </label> </tr> <tr> <label id="group7"> <td>Mic Talk Internal Extreme</td> <td class="cent"><input type="text" value="68" align="center" name="qty" id="qty7" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group7" value="Yes"></td> <td class="cent"><input type="radio" name="group7" value="No"></td> </label> </tr> <tr> <label id="group8"> <td>Mic Talk External Extreme</td> <td class="cent"><input type="text" value="53" align="center" name="qty" id="qty8" maxlength="4" size="4" /></td> <td class="cent"><input type="radio" name="group8" value="Yes"></td> <td class="cent"><input type="radio" name="group8" value="No"></td> </label> </tr> <tr> <label id="group9"> <td>Desense Test</td> <td class="cent"><input type="text" value="50" align="center" name="qty" id="qty9" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group9" value="Yes"></td> <td class="cent"><input type="radio" name="group9" value="No"></td> </label> </tr> <tr> <label id="group10"> <td>Tx Stability</td> <td class="cent"><input type="text" value="43" align="center" name="qty" id="qty10" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group10" value="Yes"></td> <td class="cent"><input type="radio" name="group10" value="No"></td> </label> </tr> <tr> <label id="group11"> <td>Microphonic Test</td> <td class="cent"><input type="text" value="60" align="center" name="qty" id="qty11" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group11" value="Yes"></td> <td class="cent"><input type="radio" name="group11" value="No"></td> </label> </tr> </table> <br><br> <button type="button" name="selectYes" onclick="selectAll('Yes')">Select All Yes</button> <button type="button" name="selectNo" onclick="selectAll('No')">Select All No</button> <br><br> </table> </form> <table class="resultsTbl" align="center"> <tr> <td>Total</td> <td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td> </tr> </table>
You can add this to your javascript
var selectYesBtn = document.getElementsByName('selectYes')[0];
var selectNoBtn = document.getElementsByName('selectNo')[0];
function check_Uncheck( radioValueAttr, check ) {
var radios = document.querySelectorAll('input[type="radio"[value="'+ radioValueAttr +'"]');
for (x in radios) {
radios[x].checked = check;
}
}
selectYesBtn.onclick = function () {
check_Uncheck("No",false);
check_Uncheck("Yes",true);
};
selectNoBtn.onclick = function () {
check_Uncheck("No",true);
check_Uncheck("Yes",false);
};
The function "check_Uncheck" works for both radios (yes/no).. passing the input value attribute("Yes"/"No") as first argument, and a boolean whether to check them or uncheck them as second argument.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.