Как добавить тип ввода = значения радио, используя Javascript? - PullRequest
Новая
       37

Как добавить тип ввода = значения радио, используя Javascript?

0 голосов
/ 15 февраля 2019

Как мне добавить значения моего типа ввода = радио (с) ??Я знаю, что у меня могут быть некоторые ошибки в моих сценариях, потому что я только что копировал их из Интернета.Я пытался понять, что не так, но я не смог этого сделать.Я не думаю, что это очень сложная проблема, и я могу быть далеко, но я все еще новичок в 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 голосов
/ 15 февраля 2019 
  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
  })
...