increase and decrease value using a radio button

試著忘記壹切 提交于 2019-12-13 07:10:23

问题


I am developing an eCommerce system. Let say if user has total of 1200 right. If he chooses fast delivery options 40 should be added to total that means at the end amount should be changed from 1200 to 1240. I have a developed a kind of application for that. I don't know what but the value is not increment. Don't know what but I need a solution, Here is my code:

<label><input type="radio" name="optradio" id="target">
<span class="label label-success">Fast Delivery</span></label>
<div id="output">10</div>
<div id="savevalue" style="visibility:hidden"></div>



<label><input type="radio" name="optradio" id="target2">
<span class="label label-success">Regular Delivery</span></label>

My Javascript code:

$('#target').click(function() {

var savevalue = $('#savevalue').text();
var output = $('#output').text();

if (savevalue==null || savevalue=="")
{
   output = output*1 + 40;
   savevalue = output;
   $('#output').html(function(i, val) { return output}); 
   $('#savevalue').html(function(i, val) { return savevalue}); 

}
});

$('#target2').click(function() {
var savevalue = $('#savevalue').text();
var output = $('#output').text();

if (output==savevalue)
{
   output = output*1 - 40;
   $('#output').html(function(i, val) { return output });
 }   
});

回答1:


Try this :

HTML :

<p id="price">100</p>
<input type="radio" name="delivery" id="delivery1" value="normal" checked> Normal <br>
<input type="radio" name="delivery" id="delivery2" value="fast"> Fast

Js:

$(document).ready(function(){
    $('#delivery1,#delivery2').change(function(){
    price = $('#price').text();
    if($('#delivery2').is(':checked')) {
        price = parseInt(price) + 40;

    } else {
        price = parseInt(price) - 40;
    }
    $('#price').text(price);
  });
});



回答2:


can you check on my fiddle https://jsfiddle.net/3422ntLh/.

In my solution, check the html code.

<label>
    <input type="radio" name="delivery" id="target" speed="fast">
    <span class="label label-success">Fast Delivery</span></label>
<div id="output">10</div>
<div id="original" value="10" style="visibility:hidden"></div>



<label>
    <input type="radio" name="delivery" id="target2" speed="normal">
    <span class="label label-success">Regular Delivery</span></label>

I saved the value of the good in $('#original).

This is my JS code:

$('input:radio[name="delivery"]').change(function() {
    alert($('#original').attr('value'));
    $('#output').html($('#original_cost').attr('value'));
    if ($(this).attr('speed') == 'fast') {
        var extra_shipping_fee = 40;
        var current_price = parseInt($('#original').attr('value'));
        var new_price = current_price + extra_shipping_fee;
        $('#output').html(new_price);
    } else {
        $('#output').html($('#original').attr('value'));
    }
})

The code is not refine, but it will give you some insights on how to continue



来源:https://stackoverflow.com/questions/38790817/increase-and-decrease-value-using-a-radio-button

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!