我卡在一个函数里了，我想你会很容易告诉我正确的路径。
如标题所示，我只想将选中的框值与选中的单选值相加，但单选值在每次点击时都不确定地求和，我知道它函数有问题，但我我是一个有代码的冒险家，正在努力自学......
总数显示的是修正后的值，但如果我再次点击单选按钮，它会再次求和。
我放了一个片段供您测试。请帮忙!
html, body {
height: 100%;
margin: 0;
}
#left {
width: 20%;
height: 100%;
position: fixed;
outline: 1px solid transparent;
background: white;
}
#right {
width: 80%;
height: auto;
outline: 1px solid transparent;
position: absolute;
right: 0;
background: #FFFFFF;
}
.text{
width:250px;
height:286px;
background:#FFF;
opacity: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: rebeccapurple;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
background: rebeccapurple;
}
.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%;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Seja bem vindo a Invista Consultoria!</title>
<link href="oficial-site-codigos.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var total = 0;
function test(item){
if(item.checked){
total+= parseInt(item.value);
}
else{
total-= parseInt(item.value);
}
//alert(total);
document.getElementById('Totalcost').innerHTML = total + "";
}
</script>
</head>
<body>
<input id="radio-1" class="radio-custom" name="radio-group" type="radio" value="500" onClick="test(this); -500" />
<label for="radio-1" class="radio-custom-label">Servico</label>
<input id="radio-2" class="radio-custom" name="radio-group" type="radio" value="500" onClick="test(this); -500" />
<label for="radio-2" class="radio-custom-label">Comercio</label>
<input id="radio-3" class="radio-custom" name="radio-group" type="radio" value="500" onClick="test(this); -500" />
<label for="radio-3" class="radio-custom-label">Servico e Comercio</label>
<br>
<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">R$ 500</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">R$ 120</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">R$ 350</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">R$ 450</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">R$ 650</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">R$ 500</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">R$ 120</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">R$ 350</label>
</li>
<li>
<input id="checkbox-9" class="checkbox-custom" name="checkbox-9" input type="checkbox" value="450" onClick="test(this);" />
<label for="checkbox-9" class="checkbox-custom-label">R$ 450</label>
</li>
<li>
<input id="checkbox-10" class="checkbox-custom" name="checkbox-10" input type="checkbox" value="650" onClick="test(this);" />
<label for="checkbox-10" class="checkbox-custom-label">R$ 650</label>
</li>
<li>
<input id="checkbox-11" class="checkbox-custom" name="checkbox-11" input type="checkbox" value="650" onClick="test(this);" />
<label for="checkbox-11" class="checkbox-custom-label">R$ 650</label>
</li>
<li>
<input id="checkbox-12" class="checkbox-custom" name="checkbox-12" input type="checkbox" value="650" onClick="test(this);" />
<label for="checkbox-12" class="checkbox-custom-label">R$ 650</label>
</li>
</ul>
<br>
Total: R$ <span id="Totalcost"></span>
</div>
</body>
</html>最佳答案
把你的函数改成这个
<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>
您需要将复选框和单选按钮的总数分开。
关于javascript - Radio + Checkbox 值，但 Radio 按钮无限期地对 onclick 求和。为什么？ (带一个片段)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42195252/