總計的兩個單選按鈕值作爲一個購物車

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給出一個工廠做。請檢查下面的代碼

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

在上面的代碼中，你可以很容易地從複選框得到的數據是點擊時...

Answer 2

您可以使用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>