Javascript 如何使用复选框作为计算总计的单选按钮

我有以下选项，我想使用1，2，3选项作为单选按钮

[checkbox] option 1 : $100 
[checkbox] option 2 : $200
[checkbox] option 3 : $300

[checkbox] Registration fee : $50 

Total = Option + Registration fee;

选中复选框后，应将值添加到

total

中，取消选中后，应从

total`中扣除
。但挑战是我想使用选项1、2和3作为单选按钮（一次只能选择一个选项）。但若我对选项使用标准单选按钮，那个么该值在选择时包含在总计中，但若我选择新选项，则不会从总计中扣除旧选项值

我用了这个密码

<script type="text/javascript">
    var total = 0;
    function fee(item) {
        if (item.checked) {
           total += parseInt(item.value);
        } else {
           total -= parseInt(item.value);
        }
        // alert(total);
        document.getElementById('Totalcost').innerHTML = total + "";
    }
</script>


var合计=0；
功能费（项目）{
如果（选中项）{
总计+=parseInt（项值）；
}否则{
总计-=parseInt（项目值）；
}
//警报（总数）；
document.getElementById（'Totalcost'）。innerHTML=total+“”；
}

HTML

我想您至少需要一个。
如果收音机的名称相同，则将取消选中：


函数计算（）{
var rads=document.getElementsByName（“选项”），
reg=document.getElementById（“reg”），
总计=document.getElementById（“总计”），
tot=0；
对于（var i=0；i尝试下面的方法，将需要大量清理

$(document).ready(function() {
    //set initial state.

    var fee= 50;
    $('#val1').change(function() {
        if($(this).is(":checked")) {
            var returnVal = $('#val1').val();
            alert(returnVal);
            fee = parseInt(fee) + parseInt(returnVal); 
             alert(fee);
        } else {
        alert('unchecked');
        var returnVal = $('#val3').val();
            alert(returnVal);
        fee = parseInt(fee) - parseInt(returnVal); 
                     alert(fee);
        }

    });
     $('#val2').change(function() {
        if($(this).is(":checked")) {
            var returnVal = $('#val2').val();
            alert(returnVal);
            fee = parseInt(fee) + parseInt(returnVal);
             alert(fee);
        } else {
        alert('unchecked');
        var returnVal = $('#val2').val();
            alert(returnVal);
        fee = parseInt(fee) - parseInt(returnVal);
         alert(fee); 
        }

    });
     $('#val3').change(function() {
        if($(this).is(":checked")) {
            var returnVal = $('#val3').val();
            alert(returnVal);
            fee = parseInt(fee) + parseInt(returnVal);
             alert(fee);
        } else {
        alert('unchecked');
        var returnVal = $('#val3').val();
            alert(returnVal);
        fee = parseInt(fee) - parseInt(returnVal);
                     alert(fee); 
        }

    });

});

试试这个：



功能费（ev）{
var合计=0；
var项目=ev目标；
如果（选中项）{
总计+=parseInt（项值）；
}否则{
总计-=parseInt（项目值）；
}
//警报（总数）；
document.getElementById（'Totalcost'）。innerHTML=total；
}
document.querySelector（'form'）。addEventListener（'change'，fee）；
0000
选择1（100%）


选择2（200%）


我不想讨论您的设计可能是如何错误的

但我想介绍一种解决方案，它并不意味着某些javascript禁用所有复选框，只允许选择一个复选框。

通过将单选按钮的样式更改为复选框，您可以轻松实现您的要求


form>input[type=“radio”]{
-webkit外观：复选框；
-moz外观：复选框；
外观：复选框；
}

程序1

程序2

程序3

费用
我认为这很直截了当

$(".total").html("$" + (parseInt($(this).val()) + 500));

为您制作了一个小提琴。
我个人会使用一个简单的MVVM库，这是一个相当简单的示例。

通过这种方式，您不必将DOM用作数据存储，并且您的表示和逻辑都非常清楚地分开


var v=新的Vue({
el:‘身体’，
数据：{
复选框：[{
姓名：'第一'，
数值：100，
勾选：假
}, {
姓名：'第二'，
价值：200，
勾选：假
}, {
姓名:"第三",，
价值：300，
勾选：假
}],
可选：{
名称：'可选'，
价值：50，
勾选：假
}
},
方法：{
foo:function（）{
var sum=this.checkbox.reduce（函数（和，项）{
返回金额+（item.checked？item.value:0）；
}, 0);
sum+=this.optional.checked？this.optional.value:0；
回报金额；
},
酒吧：功能（e）{
如果（如已选中targetVM）{
this.checkbox.forEach（函数（复选框）{
checkbox.checked=false；
});
e、 targetVM.checked=true；
}
}
}
})；
ul{
列表样式：无；
填充：0；
}



{{name}}:{{value}


{{optional.name}}
总数：
请更新问题，显示相关代码选项1=$（“#自定义ID”）.prop（'checked'）.val（）；注册费=$（'#自定义注册ID'）.prop（'checked'）.val（）；为了什么目的，您希望使复选框像单选按钮一样工作？为什么这样做是值得的？您的HTML无效…不能有多个具有相同id的元素（即
复选框3
）。此外，您应该始终在
parseInt
中添加一个
radix
，这样它肯定会被解析为base-10（即
parseInt（item.value，10）；
）你的意思是什么？我没有看到任何jQuery被标记。而且这是非常低效的编码假设OP甚至想要jQueryTanks这是我想要的。使用DOM作为数据存储是一种糟糕的做法。此外，你将所有值保留两次，作为字符串，并不断解析它们。这段代码是1999年的。我同意。然而，我们谈论的是钓鱼旅行或童子军远足的一页注册。不预订。com这不允许您取消前三个选项中的一个。我看不到OP指定这应该是可能的。接受的答案似乎证实了这一点。我想这是解释问题对问题的描述的问题。
$(".total").html("$" + (parseInt($(this).val()) + 500));