从复杂表中获取单选按钮值

时间：2018-03-26 08:00:32

标签： javascript jquery

我有一张如下表格。有一些能力，每个能力都有其选择的价值选择。每个能力的总和是从价值*重量值得到的。

每次使用jquery改变单选按钮时，如何统计每项能力的总数？右列中的总数是按单选按钮*重量值计算的值。

Table

表格格式：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<table class="table table-bordered table-condensed table-responsive">
  <thead>
    <tr>
      <th>Competencies</th>
      <th>Score</th>
      <th>Score Definition</th>
      <th>Tolerance Scale</th>
      <th>Standard Scale</th>
      <th>Weight</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody id="competency-lists">
    <tr>
      <td rowspan="6">Faith<br><br><span class="competencydefinition"></span></td>
      <td><input type="radio" name="Faith" id="radio-1" value="0" checked="true"> 0 </td>
      <td class="competencydefinition">Long Desc of Value 0
      </td>
      <td rowspan="6" id="minvalue-1">2</td>
      <td rowspan="6" id="maxvalue-1">2</td>
      <td rowspan="6" id="weightvalue-1">7</td>
      <td rowspan="6" id="totalcompetency-1"></td>
    </tr>
    <tr>
      <td><input type="radio" name="Faith" id="radio-1" value="1"> 1</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 1
</span></td>
    </tr>
    <tr>
      <td><input type="radio" name="Faith" id="radio-1" value="2"> 2</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 2
</span></td>
    </tr>
    <tr>
      <td><input type="radio" name="Faith" id="radio-1" value="3"> 3</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 3
</span></td>
    </tr>
    <tr>
      <td><input type="radio" name="Faith" id="radio-1" value="4"> 4</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 4
</span></td>
    </tr>
    <tr>
      <td><input type="radio" name="Faith" id="radio-1" value="5"> 5</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 5</span></td>
    </tr>
    <tr>
      <td rowspan="6">Opennes<br><br></td>
      <td><input type="radio" name="Opennes" id="radio-2" value="0" checked="true"> 0 </td>
      <td class="competencydefinition">Long Desc of Value 0 </td>
      <td rowspan="6" id="minvalue-2">1</td>
      <td rowspan="6" id="maxvalue-2">2</td>
      <td rowspan="6" id="weightvalue-2">7</td>
      <td rowspan="6" id="totalcompetency-2"></td>
    </tr>
    <tr>
      <td><input type="radio" name="Opennes" id="radio-2" value="1"> 1</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 1

</span></td>
    </tr>
    <tr>
      <td><input type="radio" name="Opennes" id="radio-2" value="2"> 2</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 2
</span></td>
    </tr>
    <tr>
      <td><input type="radio" name="Opennes" id="radio-2" value="3"> 3</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 3
</span></td>
    </tr>
    <tr>
      <td><input type="radio" name="Opennes" id="radio-2" value="4"> 4</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 4
</span></td>
    </tr>
    <tr>
      <td><input type="radio" name="Opennes" id="radio-2" value="5"> 5</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 5
</span></td>
    </tr>
  </tbody>
</table>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

您会看到每个1，2和weightvalue都有您的身份证号radio，totalcompetency等常见问题。因此，您可以设置逻辑，以便您可以检测每行中的weight并在使用该ID选择total按钮时唯一地计算每行的radio数。通过查看以下示例，您可以很好地理解这一点。

＆＃13;
＆＃13; 
$(document).ready(function(){
 $('input[type=radio]').on('change', function(){
  var val = $(this).val();
  var idNum = $(this).attr('id').split('-')[1];
  var weight = $('#weightvalue-'+idNum).text();
  var total = parseInt(val) * parseInt(weight);
  $('#totalcompetency-'+idNum).text(total);
 });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<table border='1' class="table table-bordered table-condensed table-responsive">
  <thead>
    <tr>
      <th>Competencies</th>
      <th>Score</th>
      <th>Score Definition</th>
      <th>Tolerance Scale</th>
      <th>Standard Scale</th>
      <th>Weight</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody id="competency-lists">
    <tr>
      <td rowspan="6">Faith<br><br><span class="competencydefinition"></span></td>
      <td><input type="radio" name="Faith" id="radio-1" value="0" checked="true"> 0 </td>
      <td class="competencydefinition">Long Desc of Value 0
      </td>
      <td rowspan="6" id="minvalue-1">2</td>
      <td rowspan="6" id="maxvalue-1">2</td>
      <td rowspan="6" id="weightvalue-1">7</td>
      <td rowspan="6" id="totalcompetency-1"></td>
    </tr>
    <tr>
      <td><input type="radio" name="Faith" id="radio-1" value="1"> 1</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 1
</span></td>
    </tr>
    <tr>
      <td><input type="radio" name="Faith" id="radio-1" value="2"> 2</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 2
</span></td>
    </tr>
    <tr>
      <td><input type="radio" name="Faith" id="radio-1" value="3"> 3</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 3
</span></td>
    </tr>
    <tr>
      <td><input type="radio" name="Faith" id="radio-1" value="4"> 4</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 4
</span></td>
    </tr>
    <tr>
      <td><input type="radio" name="Faith" id="radio-1" value="5"> 5</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 5</span></td>
    </tr>
    <tr>
      <td rowspan="6">Opennes<br><br></td>
      <td><input type="radio" name="Opennes" id="radio-2" value="0" checked="true"> 0 </td>
      <td class="competencydefinition">Long Desc of Value 0 </td>
      <td rowspan="6" id="minvalue-2">1</td>
      <td rowspan="6" id="maxvalue-2">2</td>
      <td rowspan="6" id="weightvalue-2">7</td>
      <td rowspan="6" id="totalcompetency-2"></td>
    </tr>
    <tr>
      <td><input type="radio" name="Opennes" id="radio-2" value="1"> 1</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 1

</span></td>
    </tr>
    <tr>
      <td><input type="radio" name="Opennes" id="radio-2" value="2"> 2</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 2
</span></td>
    </tr>
    <tr>
      <td><input type="radio" name="Opennes" id="radio-2" value="3"> 3</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 3
</span></td>
    </tr>
    <tr>
      <td><input type="radio" name="Opennes" id="radio-2" value="4"> 4</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 4
</span></td>
    </tr>
    <tr>
      <td><input type="radio" name="Opennes" id="radio-2" value="5"> 5</td>
      <td class="competencydefinition"><span class="competencydefinition">Long Desc of Value 5
</span></td>
    </tr>
  </tbody>
</table>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题