通过单击按钮选择一组单选按钮

Question

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> 

Answer 1

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> 

Answer 2

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> 

Answer 3

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.