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

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

我认为你至少需要其中一个。无线电将取消选中它们是否具有相同的名称：

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃34;单选按钮＆＃34;的名称和概念来自旧的汽车收音机，按下一个按钮会使另一个按钮重置：

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用作数据存储区，并且您的演示文稿和逻辑分离得相当清晰。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

我认为这很简单。

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

为你做了一个小小提琴here。

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

    });

});

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

6 个答案: