CODEWITHSUNDEEP
jquery
Modelesq
Modelesq

Reputation: 5402

Change span html upon radio selection

I have 2 radio buttons. But when the one (check1) is selected, i'd like to change the span.amount html. How would I go about doing that?

<input type="radio" class="radio-check" name="type" id="check1" value="0" checked />
<label for="check1">$99.99</label>
<input type="radio" class="radio-check" name="type" id="check2" value="1" />
<label for="check2">None</label>

$('#check1').change(function(){
    $('amount').html('$99.99'));
});

<button class="btn" type="submit">Pay <span id="amount" class="amount">$249.99</span></button>

Thank you for your help!

Upvotes: 0

Views: 1082

Answers (3)

dsgriffin
dsgriffin

Reputation: 68606

The current solutions don't fire the change event when the first radio element is de-selected. Try this instead - jsFiddle here.

jQuery:

$('input[name=type]').on('change', function(){
    $('.amount').html('$99.99');
});

HTML:

<input type="radio" class="radio-check" name="type" id="check1" value="0" checked />
<label for="check1">$99.99</label>
<input type="radio" class="radio-check" name="type" id="check2" value="1" />
<label for="check2">None</label>

<button class="btn" type="submit">Pay <span class="amount">$249.99</span></button>

I'm guessing what you eventually want to do would be something like this jsFiddle.

$('input[name=type]').on('change', function(){
    if($(this).prop('value') == 1) {
      $('.amount').html('$99.99');
    }
    else {
      $('.amount').html('$249.99');
    }
});

Upvotes: 2

Shlomi Hassid
Shlomi Hassid

Reputation: 6606

My answer : fiddle demo

Loading the first label on body load.

Then in each change updating amount span.

css:

.amount
{
    background-color: lightblue;
    padding:5px;
    margin:10px;
}

html:

<input type="radio" class="radio-check" name="type" id="check1" value="0" checked />
<label for="check1">$99.99</label>
<input type="radio" class="radio-check" name="type" id="check1" value="1" />
<label for="check2">None</label>
<br /><br />
<span class='amount'>here</span>

script:

var load_val = $('.radio-check:checked').next('label').text();
$('.amount').text(load_val);
$('.radio-check').change(function() { 
load_val = $(this).next('label').text();
$('.amount').text(load_val); 
});

Upvotes: 0

MG_Bautista
MG_Bautista

Reputation: 2653

Use this...

$('#check1').on('change', function(){
    $('.amount').html('$99.99');
});

 <input type="radio" class="radio-check" name="type" id="check1" value="0" checked />
<label for="check1">$99.99</label>
<input type="radio" class="radio-check" name="type" id="check2" value="1" />
<label for="check2">None</label>

<button class="btn" type="submit">Pay <span class="amount">$249.99</span></button>

See this jsFiddle Demo

Upvotes: 1

Related Questions