来自不同群体的无线电值正在改变，而不是求和。(用片段)
来自不同群体的无线电值正在改变，而不是求和。(用片段)
提问于 2017-02-14 16:32:03
我肯定把剧本搞砸了，这里真的需要帮助。我正试图通过我自己的学习在家里为未来的应用在一个网站上学习。
正如标题所述，我在总结无线电价值时遇到了问题。它们正在改变，而不是像你在“总计”中看到的那样添加。与收音机+复选框的和关系没有问题，但无线电+无线电不工作。
请看我的片段！
html, body {
height: 100%;
margin: 0;
}
.checkbox-custom, .radio-custom {
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: left;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
background: red;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
background: red;
}
.checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label {
outline: 1px solid #ddd; /* focus style */
}
.checkbox-grid li {
display: block;
float: left;
width: 25%;
}
hr {
height: 10px;
border: 0;
box-shadow: 0 10px 10px -10px #8c8c8c inset;
color:red;
margin-right: 20px;
margin-left: 10px;
}<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test Radio Checkbox</title>
<link href="testeradio.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var total = 0;
var radioAmount = 0;
function test(item){
if (item.type === 'radio') {
radioAmount = parseInt(item.value);
} else {
if(item.checked){
total+= parseInt(item.value);
}
else{
total-= parseInt(item.value);
}
}
document.getElementById('Totalcost').innerHTML = (total + radioAmount) + "";
}
</script>
</head>
<body>
<br>
<font color="rebeccapurple" font face="Arial" size="2">
<b>Abaixo, voce devera marcar informacoes relativas ao seu negocio e tambem os servicos especificos que deseja.</b></font>
<br>
<font color="Red" font face="Arial" size="2"><b>Ao clicar nos itens, o valor referente a eles sera adicionado ao "Total".</b></font>
<br>
<br>
<hr>
<font face="Arial, Helvetica, sans-serif""" color="rebeccapurple" size="2">
<b>Marque abaixo a quantidade media de notas fiscais emitidas pela sua empresa:</b>
</font>
<br>
<br>
<font face="Arial, Helvetica, sans-serif" color="black" size="2">
<input id="radio-1" class="radio-custom" name="radio-group" type="radio" value="500" onClick="test(this);" />
<label for="radio-1" class="radio-custom-label">Até 30</label>
<input id="radio-2" class="radio-custom" name="radio-group" type="radio" value="1000" onClick="test(this);" />
<label for="radio-2" class="radio-custom-label">Até 60</label>
<input id="radio-3" class="radio-custom" name="radio-group" type="radio" value="1800" onClick="test(this);" />
<label for="radio-3" class="radio-custom-label">Até 90</label>
<input id="radio-4" class="radio-custom" name="radio-group" type="radio" value="500" onClick="test(this);" />
<label for="radio-4" class="radio-custom-label">até 120</label>
<input id="radio-5" class="radio-custom" name="radio-group" type="radio" value="500" onClick="test(this);" />
<label for="radio-5" class="radio-custom-label">120 ou mais</label>
</font>
<br>
<br>
<font face="Arial, Helvetica, sans-serif""" color="rebeccapurple" size="2">
<b>Marque abaixo a quantidade de contas bancarias que sua empresa possui:</b>
</font>
<br>
<br>
<font face="Arial, Helvetica, sans-serif" color="black" size="2">
<input id="radio-6" class="radio-custom" name="radio-group2" type="radio" value="100" onClick="test(this);" />
<label for="radio-6" class="radio-custom-label">1</label>
<input id="radio-7" class="radio-custom" name="radio-group2" type="radio" value="200" onClick="test(this);" />
<label for="radio-7" class="radio-custom-label">2</label>
<input id="radio-8" class="radio-custom" name="radio-group2" type="radio" value="300" onClick="test(this);" />
<label for="radio-8" class="radio-custom-label">3</label>
<input id="radio-9" class="radio-custom" name="radio-group2" type="radio" value="400" onClick="test(this);" />
<label for="radio-9" class="radio-custom-label">4</label>
<input id="radio-10" class="radio-custom" name="radio-group2" type="radio" value="500" onClick="test(this);" />
<label for="radio-10" class="radio-custom-label">5</label>
<input id="radio-11" class="radio-custom" name="radio-group2" type="radio" value="600" onClick="test(this);" />
<label for="radio-11" class="radio-custom-label">6</label>
<input id="radio-12" class="radio-custom" name="radio-group2" type="radio" value="700" onClick="test(this);" />
<label for="radio-12" class="radio-custom-label">7 ou mais </label>
</font>
<br>
<br>
<font face="Arial, Helvetica, sans-serif""" color="rebeccapurple" size="2">
<b>Marque abaixo quantos funcionarios e socios sua empresa possui:</b>
</font>
<br>
<br>
<font face="Arial, Helvetica, sans-serif" color="black" size="2">
<input id="radio-13" class="radio-custom" name="radio-group3" type="radio" value="500" onClick="test(this);" />
<label for="radio-13" class="radio-custom-label">1</label>
<input id="radio-14" class="radio-custom" name="radio-group3" type="radio" value="600" onClick="test(this);" />
<label for="radio-14" class="radio-custom-label">2 a 4</label>
<input id="radio-15" class="radio-custom" name="radio-group3" type="radio" value="700" onClick="test(this);" />
<label for="radio-15" class="radio-custom-label">5 a 9</label>
<input id="radio-16" class="radio-custom" name="radio-group3" type="radio" value="700" onClick="test(this);" />
<label for="radio-16" class="radio-custom-label">10 a 15</label>
<input id="radio-17" class="radio-custom" name="radio-group3" type="radio" value="700" onClick="test(this);" />
<label for="radio-17" class="radio-custom-label">16 a 30</label>
<input id="radio-18" class="radio-custom" name="radio-group3" type="radio" value="700" onClick="test(this);" />
<label for="radio-18" class="radio-custom-label">31 a 50</label>
</font>
<br>
<br>
<font face="Arial, Helvetica, sans-serif""" color="rebeccapurple" size="2">
<b>Marque abaixo os servicos especificos que voce deseja:</b>
</font>
<br>
<font face="Arial, Helvetica, sans-serif" color="black" size="2">
<ul class="checkbox-grid">
<li>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" value="500" onClick="test(this);" />
<label for="checkbox-1" class="checkbox-custom-label">Balancete</label>
</li>
<li>
<input id="checkbox-2" class="checkbox-custom" name="checkbox-2" input type="checkbox" value="120" onClick="test(this);" />
<label for="checkbox-2" class="checkbox-custom-label">Centro</label>
</li>
<li>
<input id="checkbox-3" class="checkbox-custom" name="checkbox-3" input type="checkbox" value="350" onClick="test(this);" />
<label for="checkbox-3" class="checkbox-custom-label">Relatorio</label>
</li>
<li>
<input id="checkbox-4" class="checkbox-custom" name="checkbox-4" input type="checkbox" value="450" onClick="test(this);" />
<label for="checkbox-4" class="checkbox-custom-label">RAIS</label>
</li>
<li>
<input id="checkbox-5" class="checkbox-custom" name="checkbox-5" input type="checkbox" value="650" onClick="test(this);" />
<label for="checkbox-5" class="checkbox-custom-label">DBE</label>
</li>
<li>
<input id="checkbox-6" class="checkbox-custom" name="checkbox-6" type="checkbox" value="500" onClick="test(this);" />
<label for="checkbox-6" class="checkbox-custom-label">CAGED</label>
</li>
<li>
<input id="checkbox-7" class="checkbox-custom" name="checkbox-7" input type="checkbox" value="120" onClick="test(this);" />
<label for="checkbox-7" class="checkbox-custom-label">DACON</label>
</li>
<li>
<input id="checkbox-8" class="checkbox-custom" name="checkbox-8" input type="checkbox" value="350" onClick="test(this);" />
<label for="checkbox-8" class="checkbox-custom-label">DITR</label>
</li>
</ul>
</font>
<br><br><br><br>
<font face="Arial, Helvetica, sans-serif""" color="rebeccapurple" size="4">
<b>Total Orçado:</b></font><b><font face="Arial, Helvetica, sans-serif""" color="red" size="5"> R$ <span id="Totalcost"></span></font></b>
<br><br><br>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-14 17:00:13
您需要根据当前的代码为3组单选按钮设置3个独立变量。基于代码的一种快速而简单的方法是检查单选按钮的名称，以查看它在哪个组中。
if (item.type === 'radio') {
if (item.name === 'radio-group') radioAmount1 = parseInt(item.value);
if (item.name === 'radio-group2') radioAmount2 = parseInt(item.value);
if (item.name === 'radio-group3') radioAmount3 = parseInt(item.value);
} else {
if(item.checked){
total+= parseInt(item.value);
}
else {
total-= parseInt(item.value);
}
}
document.getElementById('Totalcost').innerHTML =
(total + radioAmount1 + radioAmount2 + radioAmount3) + "";
}不过，有更好的方法可以做到这一点，请参见这里的更多解决方案：How to get value of selected radio button?
Stack Overflow用户
发布于 2017-02-14 17:52:27
如果有多台收音机，则不能添加条件。如果你想试试这个。
function test(item){
if (item.type === 'radio') {
radioAmount=0;
var radio=document.getElementsByClassName("radio-custom");
var length=radio.length;
for(var i=0; i<length ;i++)
radioAmount+=parseInt(radio[i].checked?radio[i].value:0);
} else {
if(item.checked){
total+= parseInt(item.value);
}
else{
total-= parseInt(item.value);
}
}
document.getElementById('Totalcost').innerHTML =(total+radioAmount)+"";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42231378
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号