将两个单选按钮的值合计为购物车

Question

问题是：

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

我想要的是添加第一个单选按钮的值和选中复选框后出现的单选按钮的值。

那么我如何使用 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 行：

检查每一行的 cmets。

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

Answer 2

您可以使用 jquery 提供的工具来完成。请检查以下代码

<input type="radio" class="myradio" name="radio" id="r1" data-value="test1"/>
<input type="radio" class="myradio" name="radio" id="r1" data-value="test1"/>
<script type="text/javascript">
    var total = 0;
    $('.myradio').on('click',function(){
        //Here you can get the checkbox value from data-value attribute
        alert($(this).data('value');
       //Total the Values
       total = total + $(this).data('value');
    });
</script>

在上面的代码中，您可以在单击复选框时轻松获取数据...