Question

即使我编辑默认输入，我也无法计算输入。当用户点击所选的“是”单选按钮然后单击“计算”按钮以获取输入值的总和时，我希望所有输入总结。需要有关代码的帮助：

<script type="text/javascript">

function findTotal()
{
    var arr = document.getElementsByName('qty');
    var tot=0;
	var stdHour=0;
	
	
	for(var i = 0; i < arr.length; i++) //i=1/i=0
	{
		var radios = document.getElementsByName('group'+i);
		
		for(var j = 0; j < radios.length; j++) 
		{
			var radio = radios[j];
			
			if(radio.value == "Yes" && radio.checked) 
			{
				if(parseInt(arr[i].value))
				{
					tot += parseInt(arr[i].value);
				}
			}
			
		}
		
	}
		
		document.getElementById('total').value = tot;
		document.getElementById('stdHour').value = 3600/tot;
    
}
</script>

<!DOCTYPE html>
<html>
<head>
<style>

<!--Table designing-->
table 
{
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%%;
	align: center;
}
td, th 
{
    border: 1px solid #dddddd;
    text-align: center;
    padding: 6px;
}
tr:nth-child(even) 
{
    background-color: #dddddd;
}
input
{
   text-align:center;
}

</style>
</head>
<!--Start of Table Developing-->


<body>
<br/>
<br/>
<br/>

<form id="radioForm" method="get" >

<table style="width:70%" align="center">


<!--Attributes of table. Colspan used to insert sub-title for the main title.-->
  <tr>
    <th>Test Points</th>
    <th colspan="4">Cycle-Time</th>
  </tr>
  
  <tr>
    <td></td>
    <td>Edit</td>
    <td>Yes</td>
    <td>No</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 'Edit' column is set as below-->
    <td><input onblur="findTotal()" type="text" value="20" align="center" name="qty" id="qty1" maxlength="4" size="4"/></td>
	<!--The check boxes of 'Yes' and 'No' is created as below-->
    <td><input type="radio" name="group1" value="Yes"></td>
    <td><input type="radio" name="group1" value="No"></td>
  </label>
  </tr>
 
  <tr>
  <label id="group2">
    <td>Drop Test (Portable Only)</td>
    <td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty2" maxlength="4" size="4"/></td>
    <td><input type="radio" name="group2" value="Yes"></td>
    <td><input type="radio" name="group2" value="No"></td>
  </label>
  </tr>

  <tr>
  <label id="group3">
    <td>Power Up Test (Mobile Only)</td>
    <td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty3" maxlength="4" size="4"/></td>
    <td><input type="radio" name="group3" value="Yes"></td>
    <td><input type="radio" name="group3" value="No"></td>
  </label>
  </tr>
  
  <tr>
  <label id="group4">
    <td>User Interface Room</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group4" value="Yes"></td>
    <td><input type="radio" name="group4" value="No"></td>
  </label>
  </tr>

  <tr>
    <td><B>-30 Degree C (Cold Temp)</B></td>
  </tr>

  <tr>
  <label id="group5">
    <td>ATE Labview RF Testing Extreme</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty5" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group5" value="Yes"></td>
    <td><input type="radio" name="group5" value="No"></td>
  </label>
  </tr>

  <tr>
  <label id="group6">
    <td>User Interface Extreme</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty6" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group6" value="Yes"></td>
    <td><input type="radio" name="group6" value="No"></td>
  </label>
  </tr>

  <tr>
  <label id="group7">
    <td>Mic Talk Internal Extreme</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty7" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group7" value="Yes"></td>
    <td><input type="radio" name="group7" value="No"></td>
  </label>
  </tr>
  
  <tr>
  <label id="group8">
    <td>Mic Talk External Extreme</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty8" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group8" value="Yes"></td>
    <td><input type="radio" name="group8" value="No"></td>
  </label>
  </tr>

  <tr>
  <label id="group9">
    <td>Desense Test</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty9" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group9" value="Yes"></td>
    <td><input type="radio" name="group9" value="No"></td>
  </label>
  </tr>
  
  <tr>
  <label id="group10">
    <td>Tx Stability</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty10" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group10" value="Yes"></td>
    <td><input type="radio" name="group10" value="No"></td>
  </label>
  </tr>

  <tr>
  <label id="group11">
    <td>Microphonic Test</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty11" maxlength="10" size="4"/></td>
	<td><input type="radio" name="group11" value="Yes"></td>
    <td><input type="radio" name="group11" value="No"></td>
  </label>
  </tr>
  
  <tr>
    <td><B>+60 Degree C (Hot Temp)</B></td>
  </tr>
  
  <tr>
  <label id="group12">
    <td>ATE Labview RF Testing Extreme</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty12" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group12" value="Yes"></td>
    <td><input type="radio" name="group12" value="No"></td>
  </label>
  </tr>
  
  <tr>
  <label id="group13">
    <td>User Interface Extreme</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty13" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group13" value="Yes"></td>
    <td><input type="radio" name="group13" value="No"></td>
  </label>
  </tr>
  
  <tr>
  <label id="group14">
    <td>Mic Talk Internal Extreme</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty14" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group14" value="Yes"></td>
    <td><input type="radio" name="group14" value="No"></td>
  </label>
  </tr>
  
  <tr>
  <label id="group15">
    <td>Mic Talk External Extreme</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty15" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group15" value="Yes"></td>
    <td><input type="radio" name="group15" value="No"></td>
  </label>
  </tr>
  
  <tr>
  <label id="group16">
    <td>Desense Test</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty16" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group16" value="Yes"></td>
    <td><input type="radio" name="group16" value="No"></td>
  </label>
  </tr>
  
  <tr>
  <label id="group17">
    <td>Tx Stability</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty17" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group17" value="Yes"></td>
    <td><input type="radio" name="group17" value="No"></td>
  </label>
  </tr>
  
  <tr>
  <label id="group18">
    <td>Microphonic Test</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty18" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group18" value="Yes"></td>
    <td><input type="radio" name="group18" value="No"></td>
  </label>
  </tr>
  
  <tr>
    <td><B>Final (Ambient Room Temp)</B></td>
  </tr>
  
  <tr>
  <label id="group19">
    <td>Drop Test (Portable Only)</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty19" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group19" value="Yes"></td>
    <td><input type="radio" name="group19" value="No"></td>
  </label>
  </tr>
  
  <tr>
  <label id="group20">
    <td>ATE Labview RF Testing Room</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty20" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group20" value="Yes"></td>
    <td><input type="radio" name="group20" value="No"></td>
  </label>
  </tr>
  
  <tr>
  <label id="group21">
    <td>Mic Talk Internal Room</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty21" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group21" value="Yes"></td>
    <td><input type="radio" name="group21" value="No"></td>
  </label>
  </tr>
  
  <tr>
  <label id="group22">
    <td>Mic Talk External Room</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty22" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group22" value="Yes"></td>
    <td><input type="radio" name="group22" value="No"></td>
  </label>
  </tr>
  
  <tr>
  <label id="group23">
    <td>Final Mechanical Inspection</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty23" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group23" value="Yes"></td>
    <td><input type="radio" name="group23" value="No"></td>
  </label>
  </tr>
  
  <tr>
  <label id="group24">
    <td>Label Info Verification</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty24" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group24" value="Yes"></td>
    <td><input type="radio" name="group24" value="No"></td>
  </label>
  </tr>
  
  <tr>
  <label id="group25">
    <td>Gauge Checking</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty25" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group25" value="Yes"></td>
    <td><input type="radio" name="group25" value="No"></td>
  </label>
  </tr>
  
  <tr>
  <label id="group26">
    <td>Charging</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty26" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group26" value="Yes"></td>
    <td><input type="radio" name="group26" value="No"></td>
  </label>
  </tr>
  
  <tr>
  <label id="group27">
    <td>Packaging Buy Off</td>
	<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty27" maxlength="4" size="4"/></td>
	<td><input type="radio" name="group27" value="Yes"></td>
    <td><input type="radio" name="group27" value="No"></td>
  </label>
  </tr>
  
 
  <tr>
	<td>Total (seconds)</td>
	<td><input type="text" name="total" id="total"/></td>
  </tr>

  <tr>
	<td>Standard Hour</td>
	<td><input type="text" name="stdHour" id="stdHour"/></td>
  </tr>
  
  <tr>
	<td>VCT Capacity</td>
	<td><input type="text" name="capacity" id="capacity"/></td>
  </tr>
  
  <tr>
	<td>Head Count</td>
	<td><input type="text" name="hc" id="hc"/></td>
  </tr>
  
  <tr>
	<td>Number of Days</td>
	<td><input type="text" name="days" id="days"/></td>
  </tr>

</table>

<button type="button" align="center" onClick="findTotal()">Calculate</button>

</form> <!--End of Form-->

Answer 1

我删除了相当多的HTML，但它确实有效：代码如下。您只需添加其中的其他部分即可。

我已经开始计算0：所以第一部分有group0和qt0，在JS代码中通过数组时它会有很大帮助。此外，我已移除所有.onblur次来电，只有按钮点击才能运行findTotal()。

function findTotal() {
  let arr = document.getElementsByName('qty');
  let tot = 0;
  let stdHour = 0;

  for (let i = 0; i < arr.length; i++) {

    let radios = document.getElementsByName('group' + i);

    for (let j = 0; j < radios.length; j++) {
      let radio = radios[j];

      if (radio.value == "Yes" && radio.checked) {
        tot += parseInt(arr[i].value);
      }

    }

  }

  document.getElementById('total').value = tot;
  document.getElementById('stdHour').value = 3600 / tot;

}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%%;
  text-align: center;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 6px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

input {
  text-align: center;
}

#button {
  width: 200px margin: auto;
  text-align: center;
  margin: 10px;
}

<form id="radioForm" method="get">

  <table style="width:70%" align="center">

    <tr>
      <th>Test Points</th>
      <th colspan="4">Cycle-Time</th>
    </tr>

    <tr>
      <td></td>
      <td>Edit</td>
      <td>Yes</td>
      <td>No</td>
    </tr>

    <tr>
      <label id="group0">
    <td>Initial (On Arrival)</td>
    <td><input type="text" value="20" align="center" name="qty" id="qty0" maxlength="4" size="4"></td>
    <td><input type="radio" name="group0" value="Yes"></td>
    <td><input type="radio" name="group0" value="No"></td>
  </label>
    </tr>

    <tr>
      <label id="group1">
    <td>Drop Test (Portable Only)</td>
    <td><input type="text" value="60" align="center" name="qty" id="qty1" maxlength="4" size="4"></td>
    <td><input type="radio" name="group1" value="Yes"></td>
    <td><input type="radio" name="group1" value="No"></td>
  </label>
    </tr>

    <tr>
      <label id="group2">
    <td>Power Up Test (Mobile Only)</td>
    <td><input type="text" value="60" align="center" name="qty" id="qty2" maxlength="4" size="4"></td>
    <td><input type="radio" name="group2" value="Yes"></td>
    <td><input type="radio" name="group2" value="No"></td>
  </label>
    </tr>

    <tr>
      <label id="group3">
    <td>User Interface Room</td>
	<td><input type="text" value="60" align="center" name="qty" id="qty3" maxlength="4" size="4"></td>
	<td><input type="radio" name="group3" value="Yes"></td>
    <td><input type="radio" name="group3" value="No"></td>
  </label>
    </tr>

    <tr>
      <td>Total (seconds)</td>
      <td><input type="text" name="total" id="total" /></td>
    </tr>

    <tr>
      <td>Standard Hour</td>
      <td><input type="text" name="stdHour" id="stdHour" /></td>
    </tr>

  </table>

</form>

<div id="button"><button type="button" align="center" onClick="findTotal()">Calculate</button></div>

Answer 2

您的数量不符合，因为您的组名从1开始（例如group1）。只需修改此行，就可以了。

var radios = document.getElementsByName("group" + (i+1));

单击单选按钮时计算输入值

2 个答案: