Question

问题是：

我有四个单选按钮和一个复选框。
两个单选按钮有一个名称，两个有另一个名称。
仅在选中复选框时才会显示具有相同名称的最后一个单选按钮。

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

那么如何使用javascript或任何其他技术对这两个值进行总计。我正在做一个项目，我需要它。我需要像在购物车中那样完成。这意味着如果用户选择另一个单选按钮，则应减去前一个单词的值，并添加新单词的值。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

检查每行的评论。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

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

2 个答案: