Radio + Checkbox 值，但 Radio 按钮无限期地对 onclick 求和。为什么？（带一个片段）

Question

我卡在了一个函数中，我想你可以很容易地告诉我正确的路径。

如标题所示，我只想将选中的框值与选中的单选值相加，但单选值在每次点击时都不确定地求和，我知道s something wrong with the function, but I我是一个有代码的冒险家，试图通过我自己...

总数显示的是更正后的值，但如果我再次点击单选按钮，它会再次求和。

我放了一个片段供您测试。请帮忙！

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>

Answer 1

每次单击单选按钮时，都必须进行 total=0 并取消选中所有复选框。如果您想在更改无线电时保持选中复选框，在循环之前，保持 total=0，在循环内再次对所有选中的复选框值求和。这是一个例子：

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.type=='radio'){
      total= 0;
      var checkboxs = document.getElementsByClassName('checkbox-custom');
      for(var i=0;i<checkboxs.length;i++){
       if(checkboxs[i].checked) total+=parseInt(checkboxs[i].value);
      }
     }
     else{
    
        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" checked 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>

Answer 2

将你的函数改成这个

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

您需要将复选框和单选按钮的总数分开。

Radio + Checkbox 值，但 Radio 按钮无限期地对 onclick 求和。为什么？ （带一个片段）

Radio + Checkbox values, but Radio button is summing on click indefinetly. Why? (with a snippet)

html

javascript

css

checkbox

radio

Radio + Checkbox 值，但 Radio 按钮无限期地对 onclick 求和。为什么？（带一个片段）