如何使用 Javascript 添加 Input Type=Radio 值？答案

【问题标题】：How to add Input Type=Radio Values using Javascript?如何使用 Javascript 添加 Input Type=Radio 值？
【发布时间】：2019-07-10 00:00:29
【问题描述】：

如何添加我的输入 type=radio(s) 的值？？我知道我的脚本中可能有一些错误，因为我只是从网上复制它们。我试图找出问题所在，但我做不到。我不认为这是一个非常困难的问题，我可能还有很长的路要走，但我仍然是 javascript 的初学者。

<html>

<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
   <script>function calcscore() { score = 0; $(".calc:checked").each(function () { score += Number($(this).val()); }); $("#price").text(score.toFixed(2)); $("#sum").val(score) } $().ready(function () { $(".calc").change(function () { calcscore() }); });</script>
   <style>
       table {
     width: 1000px;
     height: auto;
     margin-left: auto;
     margin-right: auto;
   }

   th,
   td {
     text-align: left;
     padding: 8px;
   }

   tr:nth-child(even) {
     background-color: #f2f2f2;
   }
 </style>
</head>
<table class="table table-bordered table-striped" cellspacing="0" cellpadding="0">
   <tbody>
       <tr>
           <td><strong>Question</strong></td>
           <td><strong>1 Point</strong></td>
           <td><strong>2 Points</strong></td>
           <td><strong>4 Points</strong></td>
       </tr>
       <tr>
           <td><strong>Number of Users Impacted</strong></td>
           <td><input type="radio" name="Question1" value="1" id="1">Single User, team or department</td>
           <td><input type="radio" name="Question1" value="2" id="2">Multiple Users, teams or departments</td>
           <td><input type="radio" name="Question1" value="4" id="3">All users in the organization</td>
       </tr>
       <tr>
           <td><strong>Criticality of the service to the institution</strong></td>
           <td><input type="radio" name="Question2" value="1" id="4">If an outage occurs, core university functions
               can continue</td>
           <td><input type="radio" name="Question2" value="2" id="5">If outage occurs, core university functions
               cannot be performed</td>
           <td><input type="radio" name="Question2" value="4" id="6">Business critical, i.e. outage results in direct
               loss of revenue,
               reputation,
               direct exposure to fines, etc.</td>
       </tr>
       <tr>
           <td><strong>Number of teams involved with implementation</strong></td>
           <td><input type="radio" name="Question3" value="1" id="7">Activites are limited to a single IT team</td>
           <td><input type="radio" name="Question3" value="2" id="8">Multiple teams within IT coordinate activites</td>
           <td><input type="radio" name="Question3" value="4" id="9">Multiple teams in different departments must
               coordinate activites</td>
       </tr>
       <tr>
           <td><strong>Can it be tested? Can it be backed out?</strong></td>
           <td><input type="radio" name="Question4" value="1" id="10">Can it be tested and backed out easily</td>
           <td><input type="radio" name="Question4" value="2" id="11">Either cannot be tested OR cannot be backed out
               easily</td>
           <td><input type="radio" name="Question4" value="4" id="12">Cannot be tested or backed out easily</td>
       </tr>
   </tbody>
</table>
<center><input type="button" id="btnGo" value="Calculate" /></center>

我只是希望在检查这些输入单选时添加我的值。

【问题讨论】：

标签： javascript input radio

【解决方案1】：

  document.querySelectorAll('input[type="radio"]').forEach(r => {
    r.addEventListener('click', e => alert(`${e.target.name} ${e.target.value}`))
  })

编辑：

  document.querySelector('#btnGo').addEventListener('click', e => {
    var val = 0
    document.querySelectorAll('input[type="radio"]').forEach(r => {
      if(r.checked) val+= parseInt(r.value, 10)
    })
    alert(val) // val is your total, do with it as you wish
  })

【讨论】：

这是正确的方向，但它不需要提醒我“名称”，我不需要知道单个值，我需要知道所有值时的总值我的选择被选中，然后我点击了计算。
我已经添加了您的新代码，但它似乎仍然无法正常工作。单击计算时没有“警报”。
把你的脚本放在底部或者使用DOMContentLoaded