javascript - 将两个单选按钮的值相加作为购物车

Question

问题是:

• 我有四个单选按钮和一个复选框。
• 两个单选按钮具有一个名称，两个具有另一个名称。
• 最后一个同名的单选按钮只有在复选框被选中时才会出现。

What I want is add the value of first radio button and the value of radio button that appears after the checkbox is checked.

那么我如何使用 javascript 或任何其他技术来计算这两个值的总和。我在做元素时需要尽快使用它。我需要像在购物车中那样完成。这意味着如果用户选择另一个单选按钮，则应减去较早的单选按钮的值并添加新的单选按钮的值。

<script>
// get list of radio buttons with name 'size'
var sz = document.forms['de'].elements['type'];

// loop through list
for (var i=0, len=sz.length; i<len; i++) {
    sz[i].onclick = function() { // assign onclick handler function to each
        // put clicked radio button's value in total field
        var m=this.form.elements.total.value = this.value;
    };
}
var sa = document.forms['de'].elements['glass'];

// loop through list
for (var i=0, len=sa.length; i<len; i++) {
    sa[i].onclick = function() { // assign onclick handler function to each
        // put clicked radio button's value in total field
        var n=this.form.elements.total1.value = this.value;
    };
}
      
$(document).ready(function () {
  $('.a').hide();
  $('#checkb').click(function () {
    var $this = $(this);
    if ($this.is(':checked')) {
      $('.a').show();
    } else {
      $('.a').hide();
    }
  });
});
 
    
</script>

<form action="sum.php" method="post" name="de">
<fieldset>
<table align="center">
<tr><td align="center" colspan="100sp"><label><input type="radio" name="type" value="200" />Ordinary (Rs. 200)</label>
<tr><td align="center" colspan="100sp"><label><input type="radio" name="type" value="500" />Original (Rs. 500)</label>
<tr><td colspan="100sp"><label>Do You want a screen guard or a tempered glass?</label><input type="checkbox" name="screen" value="yes" id="checkb" />
<tr><td align="center" colspan="100sp"><label class="a"><input type="radio" class="a" name="glass" value="100" />Screen Guard (Rs. 100)</label>
<tr><td align="center" colspan="100sp"><label class="a"><input type="radio" class="a" name="glass" value="200" />Tempered Glass (Rs. 200)</label>
</table>
<p><label>Repair: Rs. <input type="text" name="total" value="0" readonly="readonly" /></label></p>
<p><label>Glass: Rs. <input type="text" name="total1" value="0" readonly="readonly" /></label></p>
<p><label>Total: Rs. <input type="text" name="total2" value="0" readonly="readonly" /></label></p>
</fieldset>
</form>

Answer 1

您可以使用 Jquery 事件 Change() 执行此操作.我已将 ID 名称添加到输入文本元素和此 Jquery 行:

检查每一行的注释。

$(document).ready(function() {
  
  //HIDE AND SHOW EXTRA OPTIONS
  $('.a').hide();
  $('#checkb').change(function() {
      $('.a').toggle();
  });
  
  //CHECK WHEN ANY RADIO INPUT CHANGES
  $('fieldset').on('change','input[type=radio]',function(){
    
    //Get the Value and wich field text will change
    var value = $(this).attr('value'),
        target = $(this).attr('name');
    $('#'+target).val(value);
    
    //Show the total 
    var total = parseInt($('#type').val(),10) + parseInt($('#glass').val(),10);
    $('#total').val(total);
    
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <fieldset>
    <label>
      <input type="radio" name="type" value="200" />Ordinary (Rs. 200)</label>
    <br>
    <label>
      <input type="radio" name="type" value="500" />Original (Rs. 500)</label>
    <br>
    <input type="checkbox" name="screen" value="yes" id="checkb" />
    <label>Do You want a screen guard or a tempered glass?</label>
    <br>
    <label class="a">
      <input type="radio" class="a" name="glass" value="100" />Screen Guard (Rs. 100)</label>
    <br>
    <label class="a">
      <input type="radio" class="a" name="glass" value="200" />Tempered Glass (Rs. 200)</label>
    <br>
    <p>
      <label>Repair: Rs.
        <input type="text" id="type" name="total" value="0" readonly="readonly" />
      </label>
    </p>
    <p>
      <label>Glass: Rs.
        <input type="text" id="glass" name="total1" value="0" readonly="readonly" />
      </label>
    </p>
    <p>
      <label>Total: Rs.
        <input type="text" id="total" name="total2" value="0" readonly="readonly" />
      </label>
    </p>
  </fieldset>
</form>