onchange not working with radio button

Asked 25/1, 2011 at 15:34 Answered 18/8, 2014 at 14:16

Solved javascript jquery css radiobuttonlist

I have a few radio buttons which should call hider(something); when they change, meaning when they are checked or unchecked. This works, i.e. when checked they call the JS function, however, if they're unchecked due to selecting another radio button from that group, it does not call the js script again.

Do I need to use something else than onchange?

This is what the radio buttons look like at the moment:

<input name="ostype" type="radio" value="0" onchange="hider(solaris);">solaris
<input name="ostype" type="radio" value="1" onchange="hider(linux);">linux

My hider function is currently:

function hider(divid) {
 if ($(divid).is('.hidden')) {
  $(divid).removeClass('hidden');
 } else {
  $(divid).addClass('hidden');
 }
}

Dee answered 25/1, 2011 at 15:34 Comment(1)

I'm using Opera 11 to test, but any browser would be nice :) – Dee 25/1, 2011 at 15:39

Since this question is still not answered correctly yet ranks quite high for me in Google for "radio button onchange", here's a proper solution for anyone still looking.

If you're using jQuery, just use jQuery's attribute selector as noted by Flavius Stef.

OP, it's not entirely clear what your code does. Let's assume in your code you want to add the "hidden" class to whatever radio button is active.

$("your selector here").change(function() {
    $('input[name="' + this.name + '"]').removeClass("hidden");

    $(this).addClass("hidden");
});

Please note the difference between $(this) (the jQuery object) and this (the DOM object). Basically I'm removing the "hidden" class from every input that goes by the same name, and then I add the "hidden" class to the current input.

Of course I'm assuming here that you're not using duplicate names for different inputs on the page. Also note that this would only work for radio buttons, as the radio button "change" event only fires when activated, not when deactivated.

Listening for onchange on both checkboxes and radio buttons

In my case, I wanted to add a "checked" class to active radio buttons and checkboxes. Since the checkbox fires the "onchange" event both when checked and unchecked, I needed a bit of extra code.

$('input[type="radio"]').change(function() {
    $('input[name="' + this.name + '"]').removeClass("checked");
    $(this).addClass("checked");
});

$('input[type="checkbox"]').change(function() {
    $(this).toggleClass("checked", ($(this).is(":checked")));
});

The latter function uses toggleClass to set the "checked" class if .is(":checked") is true.

Alternatively you might want to combine the two functions into something like:

$('input[type="radio"], input[type="checkbox"]').change(function() {
    if(this.type == "radio")
        $('input[name="' + this.name + '"]').removeClass("checked");

    $(this).toggleClass("checked", ($(this).is(":checked")));
});

Either way, always be careful when listening for an onclick event as it will not fire when the input is activated through keyboard navigation.

Retrenchment answered 3/8, 2013 at 15:43 Comment(0)

Bind change event to ALL radio buttons on document ready:

$(function(){

   $('input[name=list_type]:radio').on("change", function(){   
       showHideBlock();
   });
   showHideBlock();    
});

Show -- hide block depends on ONE radio button status:

function showHideBlock(){
   if ($("#Option").is(':checked')){
       $('#Block').show();
   } else {
       $('#Block').hide();
   }

}

Viridis answered 18/8, 2014 at 14:16 Comment(0)

Here's a version that you might draw inspiration from (tested on Chrome and FF):

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
</head>
<body>
<input type="radio" name="ostype" checked="checked" onclick="hider('linux')">linux
<input type="radio" name="ostype" onclick="hider('solaris');">solaris

<div id="content">
        <div id="linux">linux</div>
        <div id="solaris" style="display:none;">solaris</div>
</div>
<script>
function hider(divname) {
        $('#content div').each(function(){
                $(this).hide(); 
        });

        $('#'+divname).show();
}
</script>
</body>
</html>

Wilful answered 25/1, 2011 at 15:36 Comment(6)

onclick has the same problem. It only calls it when I click on /that/ radio button, and not when I select a different radio button. – Dee 25/1, 2011 at 15:38

Use onclick, hide all elements and show only the one matching the radio button that was clicked i.e. selected. – Dope 25/1, 2011 at 15:43

My bad, I did not understand the actual problem. You need to take a different approach: in hider() iterate all radios and hide them, then call $(divid).removeClass('hidden'). – Wilful 25/1, 2011 at 15:44

Right, how would I iterate through all the radios with the name="ostype" ? – Dee 25/1, 2011 at 15:59

$('input[name=ostype]:radio').each() – Wilful 25/1, 2011 at 16:21

This doesn't seem to work: function hider(divid) { $('input[name=ostype]:radio').each(addClass('hidden')); $(divid).removeClass('hidden'); } – Dee 25/1, 2011 at 16:33

<input name="ostype" type="radio" value="0" onclick="hider('solaris');">solaris
<input name="ostype" type="radio" value="1" onclick="hider('linux');">linux

function hider(divid) {
 $( 'div.div_class' ).hide();
 $( '#' + divid ).show();
}

Make sure you add a class to call the divs and make sure you put quotes around solaris and linux in the function calls

Toon answered 25/1, 2011 at 15:48 Comment(0)

If I understand you correctly you can just use an onClick on every button and hide the others while showing the one your clicking on. Like this:

function showInfo(info)
    {
        var info = document.getElementById("1");
        info.style.display = "block";

        var info = document.getElementById("2");
        info.style.display = "none";

        }

So the first one is showing and the second one is hiding. Then just add one for every div that should be hidden.

You can also do this with jQuery.

function showAndHide(val1, val2)
        {
        $(val1).hide();
        $(val2).show();
        }

And don't forget to have style="display:none" in every div.

Squire answered 28/11, 2012 at 10:15 Comment(0)

-1

did you declare the vars solaris and linux? otherwise your browser should show you an Error

Puentes answered 25/1, 2011 at 15:49 Comment(0)

Listening for onchange on both checkboxes and radio buttons

Recommended topics

Hot tags