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

Question

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

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

[checkbox] Registration fee : $50 

Total = Option + Registration fee;

选中复选框后，应将值添加到total而取消选中后，应从总计from扣除值。 但挑战在于我想将选项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>

的HTML

<input id="checkbox1" type="checkbox" name="program1" value="100" onClick="fee(this);"/>
<input id="checkbox2" type="checkbox" name="program2" value="200" onClick="fee(this);"/>
<input id="checkbox3" type="checkbox" name="program3" value="300" onClick="fee(this);"/>
<input id="checkbox4" type="checkbox" name="fee" value="50" onClick="fee(this);"/>

Answer 1

我认为您至少需要其中之一。 收音机将取消选中它们是否具有相同的名称：

 function calc() { var rads = document.getElementsByName("option"), reg = document.getElementById("reg"), total = document.getElementById("total"), tot = 0; for (var i=0;i<rads.length;i++) { tot+=rads[i].checked?parseInt(rads[i].value,10):0; } if (reg.checked) tot += parseInt(reg.value,10); total.value=tot; } window.onload=function() { var rads = document.getElementsByName("option"), reg = document.getElementById("reg"); for (var i=0;i<rads.length;i++) { rads[i].onclick=calc; } reg.onclick=calc; } 

 <input type="radio" name="option" id="option1" value="100" />100 <input type="radio" name="option" id="option2" value="200" />200 <input type="radio" name="option" id="option3" value="300" />300 <br/> <input type="checkbox" name="reg" id="reg" value="50" />50<br/> Total <input type="text" readonly id="total" /><br/> 

---

“单选按钮”的名称和概念来自旧的汽车收音机，在其中按下一个按钮会使另一个按钮复位：

Answer 2

尝试这个：

 function fee(ev) { var total = 0; var item = ev.target; if (item.checked) { total += parseInt(item.value); } else { total -= parseInt(item.value); } // alert(total); document.getElementById('Totalcost').innerHTML = total; } document.querySelector('form').addEventListener('change', fee); 

 <div id='Totalcost'>0000</div> <form> <input type="radio" name='name' value="100">option1(100£) <br> <input type="radio" name='name' value="200">option2(200£) <br> </form> 

使用form和change事件，代码更简洁

Answer 3

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

但我想介绍一种解决方案，该解决方案并不意味着某些javascript会禁用所有复选框，而只允许选择一个复选框。
通过将单选按钮的样式更改为类似于复选框的形式，您可以轻松实现所要查询的内容。

 form > input[type="radio"] { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox; } 

 <form> <input type="radio" name="program" value="100" /> program1<br /> <input type="radio" name="program" value="200" /> program2<br /> <input type="radio" name="program" value="300" /> program3<br /> <input type="checkbox" name="fee" value="50" /> fee </form> 

您不应使用此功能，而应考虑使用某些单选按钮。 这对用户而言是反直观的。

Answer 4

我个人将为此使用一个简单的MVVM库， Vue.js是一个非常简单的示例。
这样，您不必将DOM用作数据存储，并且您的演示文稿和逻辑都非常清楚地分开了。

 var v = new Vue({ el: 'body', data: { checkboxes: [{ name: 'first', value: 100, checked: false }, { name: 'second', value: 200, checked: false }, { name: 'third', value: 300, checked: false }], optional: { name: 'optional', value: 50, checked: false } }, methods: { foo: function() { var sum = this.checkboxes.reduce(function(sum, item) { return sum + (item.checked ? item.value : 0); }, 0); sum += this.optional.checked ? this.optional.value : 0; return sum; }, bar: function(e) { if (e.targetVM.checked) { this.checkboxes.forEach(function(checkbox) { checkbox.checked = false; }); e.targetVM.checked = true; } } } }); 

 ul { list-style: none; padding: 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.12/vue.min.js"></script> <ul> <li v-repeat="checkboxes"> <input type="checkbox" id="checkbox_{{name}}" v-model="checked" v-on="click: bar" /> <label for="checkbox_{{name}}">{{name}}: {{value}}</label> </li> </ul> <input type="checkbox" v-model="optional.checked" id="optional_{{optional.name}}" /> <label for="optional_{{optional.name}}">{{optional.name}}</label> <p>Total: <span v-text="foo()"></span> </p> 

Answer 5

我认为这很简单。

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

在这里给你做一个小提琴。

Answer 6

尝试以下类似操作，将需要进行大量清理。

$(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); 
        }

    });

});