jQuery radio button if statement

Question

How can I do a simple if statement based on radio button selection?

So if radio button inches is displayed, then div.inchesUser is shown (using .show) And the opposite for centimetres.

This is what I want the function to do:

$('div.inchesUser').show(200);

This is my radio button code:

<form id="unitChooser">
    <label>Inches or centimetres?</label>
    <input class="unitSelectInches" type="radio" name="units" value="inches" />Inches
    <input class="unitSelectCenti" checked="checked" type="radio" name="units" value="cms" />Centimetres
</form>

possible duplicate of [How can I get which radio is selected via jQuery?](http://stackoverflow.com/questions/596351/how-can-i-get-which-radio-is-selected-via-jquery) — Barmar, Feb 17 '14 at 20:31

score 0 · Answer 1 · answered Feb 17 '14 at 20:31

0

try this

$("input:radio[name=units]").click(function() {
    var value = $(this).val();
    if(value == 'inches')
        $('div.centimetreUser').show(200);
});

DEMO

answered Feb 17 '14 at 20:31

Alessandro Minoccheri

34,369
22
118
164

You shouldn't have the whole thing in an `if`. – Barmar Feb 17 '14 at 20:33
check this jsfiddle I have make an update: http://jsfiddle.net/8pEp2/8/ @Francesca – Alessandro Minoccheri Feb 17 '14 at 20:36
It does work however if you check the other radio button afterwards then the other form appears. How do I hide the old form if you choose the other button? http://jsfiddle.net/8pEp2/11/ – Francesca Feb 17 '14 at 20:45

Mohammad Adil · Answer 2 · 2014-02-17T20:40:36.777

0

Something like this -

<form id="unitChooser">
    <label>Inches or centimetres?</label>
    <input class="unitSelectInches" data-class='inchesUser' type="radio" name="units" value="inches" />Inches
    <input class="unitSelectCenti" data-class='centimetresUser' checked="checked" type="radio" name="units" value="cms" />Centimetres
</form>

$('input:radio[name=units]').on('change', function () {
    $('div.centimetreUser, div.inchesUser').hide();
    $('div.' + $(this).data('class')).show(200);
});

Demo ---> http://jsfiddle.net/WT2uc/

edited Feb 17 '14 at 20:40

answered Feb 17 '14 at 20:34

Mohammad Adil

44,013
17
87
109

@Francesca See this demo `-->` http://jsfiddle.net/WT2uc/ ------ your fiddle updated `-->` http://jsfiddle.net/8pEp2/12/ – Mohammad Adil Feb 17 '14 at 20:42

jQuery radio button if statement

2 Answers2