如何使用Javascript添加Input Type = Radio值?

时间:2019-02-15 19:51:05

标签: javascript input radio

如何添加输入类型=收音机的值?     我知道我的脚本可能有一些错误,因为我只是从网络上复制它们。我试图弄清楚出什么问题了,但我做不到。我不认为这是一个非常困难的问题,而且我可能还有一段距离,但我仍然是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>

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

1 个答案:

答案 0 :(得分:0)

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