javascript - 对单选按钮的值求和并使用 JavaScript 或 jQuery 将其打印到相应的文本框
问题描述
我想对单选按钮的值求和，并使用 JavaScript 或 jQuery 将该总和打印到受尊重的文本框。
类名应该是每个单选按钮的结果，
我只在一个受人尊敬的文本框中实现了总和。
function calcscore() {
var score = 0;
$(".rialistic:checked").each(function() {
score += parseInt($(this).val() 10);
});
$("input[name=sum]").val(score)
}
$().ready(function() {
$(".rialistic").change(function() {
calcscore()
});
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- The class name should be the results of each radio button -->
<body>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#
</th>
<th scope="col">Questions
</th>
<th scope="col">Yes
</th>
<th scope="col">No
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>
<?php echo $question1?>
</td>
<td>
<div class="radio"><label><input class="rialistic" type="radio" value = "1" name="optradio1" id="value1" ></label></div>
</td>
<td>
<div class="radio"><label><input class="rialistic" type="radio" value = "0" name="optradio1" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>
<?php echo $question2?>
</td>
<td>
<div class="radio"><label><input class="investigative" type="radio" value = "1" name="optradio2" id="value2" ></label></div>
</td>
<td>
<div class="radio"><label><input class="investigative" type="radio" value = "0" name="optradio2" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>
<?php echo $question3?>
</td>
<td>
<div class="radio"><label><input class="artistic" type="radio" value = "1" name="optradio3" id="value3" ></label></div>
</td>
<td>
<div class="radio"><label><input class="artistic" type="radio" value = "no" name="optradio3" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td>
<?php echo $question4?>
</td>
<td>
<div class="radio"><label><input class="social" type="radio" value = "1" name="optradio4" id="value4" ></label></div>
</td>
<td>
<div class="radio"><label><input class="social" type="radio" value = "no" name="optradio4" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">5</th>
<td>
<?php echo $question5?>
</td>
<td>
<div class="radio"><label><input class="conventional" type="radio" value = "1" name="optradio5" id="value5" ></label></div>
</td>
<td>
<div class="radio"><label><input class="conventional" type="radio" value = "no" name="optradio5" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">6</th>
<td>
<?php echo $question6?>
</td>
<td>
<div class="radio"><label><input class="conventional" type="radio" value = "1" name="optradio6" id="value6" ></label></div>
</td>
<td>
<div class="radio"><label><input class="Conventional" type="radio" value = "0" name="optradio6" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">7</th>
<td>
<?php echo $question7?>
</td>
<td>
<div class="radio"><label><input class="rialistic" type="radio" value = "1" name="optradio7" id="value7" ></label></div>
</td>
<td>
<div class="radio"><label><input class="rialistic" type="radio" value = "no" name="optradio7" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">8</th>
<td>
<?php echo $question8?>
</td>
<td>
<div class="radio"><label><input class="artistic" type="radio" value = "1" name="optradio8" id="value8" ></label></div>
</td>
<td>
<div class="radio"><label><input class="artistic" type="radio" value = "no" name="optradio8" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">9</th>
<td>
<?php echo $question9?>
</td>
<td>
<div class="radio"><label><input class="conventional" type="radio" value = "1" name="optradio9" id="value9" ></label></div>
</td>
<td>
<div class="radio"><label><input class="conventional" type="radio" value = "no" name="optradio9" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">10</th>
<td>
<?php echo $question10?>
</td>
<td>
<div class="radio"><label><input class="enterprising" type="radio" value = "1" name="optradio10" id="value10" ></label></div>
</td>
<td>
<div class="radio"><label><input class="enterprising" type="radio" value = "no" name="optradio10" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">11</th>
<td>
<?php echo $question11?>
</td>
<td>
<div class="radio"><label><input class="investigative" type="radio" value = "1" name="optradio11" id="value11" ></label></div>
</td>
<td>
<div class="radio"><label><input class="investigative" type="radio" value = "0" name="optradio11" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">12</th>
<td>
<?php echo $question12?>
</td>
<td>
<div class="radio"><label><input class="social" type="radio" value = "1" name="optradio12" id="value12" ></label></div>
</td>
<td>
<div class="radio"><label><input class="social" type="radio" value = "no" name="optradio12" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">13</th>
<td>
<?php echo $question13?>
</td>
<td>
<div class="radio"><label><input class="social" type="radio" value = "1" name="optradio13" id="value13" ></label></div>
</td>
<td>
<div class="radio"><label><input class="social" type="radio" value = "no" name="optradio13" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">14</th>
<td>
<?php echo $question14?>
</td>
<td>
<div class="radio"><label><input class="rialistic" type="radio" value = "1" name="optradio14" ></label></div>
</td>
<td>
<div class="radio">
<label>
<input class="rialistic" type="radio" value = "0" name="optradio14" >
</label>
</div>
</td>
</tr>
</tbody>
</table>
Rialistic:
<input type="text" name="sum" />
<br/>
Investigative:
<input type="text" name="sum2" />
<br/>
Artistic:
<input type="text" name="sum3" />
<br/>
Social:
<input type="text" name="sum4" />
<br/>
Enterprising:
<input type="text" name="sum5" />
<br/>
Conventional:
<input type="text" name="sum6" />
<br/>
</body>解决方案
我刚刚10从您的代码中删除，它工作得很好。
就像你知道的那样，你必须onChange为你想要的每个不同的类编写一个函数。
function calcscore(){
var score = 0;
$(".rialistic:checked").each(function(){
score += parseInt($(this).val());
});
console.log(score);
$("input[name=sum]").val(score)
}
$().ready(function(){
$(".rialistic").change(function(){
calcscore()
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Questions</th>
<th scope="col">Yes</th>
<th scope="col">No</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><?php echo $question1?></td>
<td><div class="radio"><label><input class="rialistic" type="radio" value = "1" name="optradio1" id="value1" ></label></div></td>
<td><div class="radio"><label><input class="rialistic" type="radio" value = "0" name="optradio1" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">2</th>
<td><?php echo $question2?></td>
<td><div class="radio"><label><input class="investigative" type="radio" value = "1" name="optradio2" id="value2" ></label></div></td>
<td><div class="radio"><label><input class="investigative" type="radio" value = "0" name="optradio2" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">3</th>
<td><?php echo $question3?></td>
<td><div class="radio"><label><input class="artistic" type="radio" value = "1" name="optradio3" id="value3" ></label></div></td>
<td><div class="radio"><label><input class="artistic" type="radio" value = "no" name="optradio3" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">4</th>
<td><?php echo $question4?></td>
<td><div class="radio"><label><input class="social" type="radio" value = "1" name="optradio4" id="value4" ></label></div></td>
<td><div class="radio"><label><input class="social" type="radio" value = "no" name="optradio4" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">5</th>
<td><?php echo $question5?></td>
<td><div class="radio"><label><input class="conventional" type="radio" value = "1" name="optradio5" id="value5" ></label></div></td>
<td><div class="radio"><label><input class="conventional" type="radio" value = "no" name="optradio5" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">6</th>
<td><?php echo $question6?></td>
<td><div class="radio"><label><input class="conventional" type="radio" value = "1" name="optradio6" id="value6" ></label></div></td>
<td><div class="radio"><label><input class="Conventional" type="radio" value = "0" name="optradio6" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">7</th>
<td><?php echo $question7?></td>
<td><div class="radio"><label><input class="rialistic" type="radio" value = "1" name="optradio7" id="value7" ></label></div></td>
<td><div class="radio"><label><input class="rialistic" type="radio" value = "no" name="optradio7" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">8</th>
<td><?php echo $question8?></td>
<td><div class="radio"><label><input class="artistic" type="radio" value = "1" name="optradio8" id="value8" ></label></div></td>
<td><div class="radio"><label><input class="artistic" type="radio" value = "no" name="optradio8" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">9</th>
<td><?php echo $question9?></td>
<td><div class="radio"><label><input class="conventional" type="radio" value = "1" name="optradio9" id="value9" ></label></div></td>
<td><div class="radio"><label><input class="conventional" type="radio" value = "no" name="optradio9" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">10</th>
<td><?php echo $question10?></td>
<td><div class="radio"><label><input class="enterprising" type="radio" value = "1" name="optradio10" id="value10" ></label></div></td>
<td><div class="radio"><label><input class="enterprising" type="radio" value = "no" name="optradio10" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">11</th>
<td><?php echo $question11?></td>
<td><div class="radio"><label><input class="investigative" type="radio" value = "1" name="optradio11" id="value11" ></label></div></td>
<td><div class="radio"><label><input class="investigative" type="radio" value = "0" name="optradio11" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">12</th>
<td><?php echo $question12?></td>
<td><div class="radio"><label><input class="social" type="radio" value = "1" name="optradio12" id="value12" ></label></div></td>
<td><div class="radio"><label><input class="social" type="radio" value = "no" name="optradio12" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">13</th>
<td><?php echo $question13?></td>
<td><div class="radio"><label><input class="social" type="radio" value = "1" name="optradio13" id="value13" ></label></div></td>
<td><div class="radio"><label><input class="social" type="radio" value = "no" name="optradio13" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">14</th>
<td><?php echo $question14?></td>
<td><div class="radio"><label><input class="rialistic" type="radio" value = "1" name="optradio14" ></label></div></td>
<td><div class="radio"><label><input class="rialistic" type="radio" value = "0" name="optradio14" ></label></div></td>
</tr>
</tbody>
</table>
Rialistic:
<input type="text" name="sum"/>
<br/>
Investigative:
<input type="text" name="sum2"/>
<br/>
Artistic:
<input type="text" name="sum3"/>
<br/>
Social:
<input type="text" name="sum4"/>
<br/>
Enterprising:
<input type="text" name="sum5"/>
<br/>
Conventional:
<input type="text" name="sum6"/>
<br/>
</body>推荐阅读
- javascript - appendChild 不添加新元素。它只是将旧元素替换为新元素（java脚本）
- node.js - 如何在 mongodb 数据库上运行查询，执行其他一些操作，然后在 nodejs 中呈现视图？
- elasticsearch - 当查询包含“IN”前缀时，为什么弹性搜索不返回结果？
- google-cloud-platform - Laravel 应用程序未在 Cloud Run 上的 PORT 号上启动
- python-3.x - matplotlib中多图中的刻度宽度
- html - iOS13和iOS12 iframe跨域setcookies策略不同
- selenium - 如何在appium中进行拉动刷新？
- javascript - Ajax Post 请求在移动设备上不起作用
- puppeteer - 记录事件并自动生成 puppeteer 脚本，没有 chrome 扩展 puppeteer-recorder 是否可行？
- jquery - 有没有可能在cordova angular js wnd uwp应用程序中使用jquery将html转换为pdf？我收到'blob：ms-appx-web'不允许加载