Simple show hide div with radio button jQuery

Question

I have this jQuery:

$(document).ready(function() {

    $("input[type=radio]").change(function()
    {
        var divId = $(this).attr("id");

        if ($(this).is(":checked")) {
            $("." + divId).show();
        }
        else {
            $("." + divId).hide();
        }

    });
    $("input[type=radio]").change();

});

divs should show/hide depending if inputs are checked/unchecked

EDIT: I should mention that using checkboxes the divs DO show and hide, but with radios they just show :(.

It works with checkboxes but not radio buttons, why is that?

http://jsfiddle.net/qarZb/1/

`$("." + divId).show();` you're selecting a class, not an id. Use `#` instead of `.` — crush, May 31 '13 at 13:02
Ah, well I guess if you would've added the HTML, I would've known that. — crush, May 31 '13 at 13:04
The problem is that the currently selected radio button doesn't receive a change event when a new radio button from the group is selected. Only the newly selected radio button receives the change event. — crush, May 31 '13 at 13:06
@crush i thought that is what the problem was just didn't know what do do about it lol — Edward, May 31 '13 at 13:09

kamil · Accepted Answer · 2013-05-31T13:12:30.377

2

It's because radio belongs to the same name name='same', so jQuery detects that it is selected.

When you fire change event on radio, jQuery finds out that 1 of radio is selected so it shows proper div. But next time, when you click another one, yet same radio input is still selected (belongs to same name group). Basically what I did, is to add class check to your divs to hide/show and when firing change on radio, I'm hiding them all and then showing only the proper one.

Here's updated code:

http://jsfiddle.net/qarZb/6/

edited May 31 '13 at 13:12

answered May 31 '13 at 13:07

kamil

3,482
1
40
64

What should happen when I first use checkbox and then option button – Dineshkani May 31 '13 at 13:11
I updated code once again, this time checking for selected checkboxes too – kamil May 31 '13 at 13:13
Your solution is better.. – writeToBhuwan May 31 '13 at 13:16

score 0 · Answer 2 · answered May 31 '13 at 13:13

This is because you cannot un-check a radio button like checkboxes.

To accomplish your task you must make a few changes to your code:

$(document).ready(function() {

    $("input[type=radio]").change(function()
    {
        var divId = $(this).attr("id");

        if ($(this).is(":checked")) {
            $("." + divId).show();
            $("." + divId).siblings('[class^=check]').hide();

        }
        else {
            $("." + divId).hide();
        }

    });

});

Fiddle

Simple show hide div with radio button jQuery

2 Answers2