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

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

检查每行的注释。

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

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