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

Question

我想添加两个buttons，可以根据相应的类型选择所有radio buttons。我希望按钮相应地选择所有Yes单选按钮或所有No按钮。

如果有人能帮我解决这个问题，我将不胜感激。更喜欢JavaScript而不是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

您可以使用以下功能：

function selectAll(value) {
   var elements = document.querySelectorAll("input[value=" + value + "]");
   elements.forEach(function(element, index) {
       element.checked = true;
   });
}

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

单击按钮，您可以调用以下功能，该功能将根据传递的参数切换选择的单选按钮是/否。

代码使用 type='radio' 获取包含value='Yes'和value='No'或querySelectorAll的所有单选按钮的HTML集合，然后转换HTML元素使用slice将数据集合到数组中。然后使用checked方法将true属性更新为Map。

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

您可以将其添加到您的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);
};

功能＆＃34; check_Uncheck＆＃34;适用于两个无线电（是/否）..传递输入值属性（＆＃34;是＆＃34; /＆＃34;否＆＃34;）作为第一个参数，以及布尔值是否检查它们或取消选中它们为第二个论点。