问从复表中获取射电按钮值
EN

Stack Overflow用户

提问于 2018-03-26 08:00:32

回答 1查看 69关注 0票数 0

我有一张像下面这样的桌子。有一些能力，每个能力都有自己的价值选项可供选择。每个能力的总和是从值*权重值中得到的。

如何在每次使用jquery更改单选按钮时计算每个能力的总数？右边列中的总数是从单选按钮*权重值中按值计数的。

表格

表格格式：

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

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-03-26 08:17:45

您可以看到id号1、2等对于每个weightvalue、radio和totalcompetency都是通用的。因此，您可以以这样的方式设置您的逻辑:您可以从每一行检测weight，并在使用id号选择radio按钮时唯一地计算每一行的total。通过查看下面的示例，您可以很好地理解这一点。

$(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);
 });
});

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49486605

复制

相似问题

问从复表中获取射电按钮值
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从复表中获取射电按钮值EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从复表中获取射电按钮值
EN