Jquery – Capturing RadioButton click and taking action

jquery

I have 3 radiobutton on my page. There are 3 buttons also on the same page. i want to show different buttons when each is clicked.

<input id="Radio1" type="radio" name="grp1" class="abc" />
<input id="Radio2" type="radio" name="grp1" class="abc" />
<input id="Radio3" type="radio" name="grp1" class="abc" />

Update: There is only one button to be shown corresponding to each radio button..For eg: If Radio1 is clicked show Button 1, if Radio 2 is clicked show Button 2 and so on

Best Answer

$(function() { // at dom ready
  $('input.abc').change(function() { // on radio's change event
    $('.buttons-to-hide-class').hide(); // hide buttons
    $('#button-to-show-id').show(); // show desired button
  });
});

Related Solutions

Javascript – How to detect a click outside an element

Note: Using stopPropagation is something that should be avoided as it breaks normal event flow in the DOM. See this CSS Tricks article for more information. Consider using this method instead.

Attach a click event to the document body which closes the window. Attach a separate click event to the container which stops propagation to the document body.

$(window).click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

Javascript – In jQuery, how to select an element by its name attribute

This should do it, all of this is in the documentation, which has a very similar example to this:

$("input[type='radio'][name='theme']").click(function() {
    var value = $(this).val();
});

I should also note you have multiple identical IDs in that snippet. This is invalid HTML. Use classes to group set of elements, not IDs, as they should be unique.

Best Answer

Related Solutions

Javascript – How to detect a click outside an element

Javascript – In jQuery, how to select an element by its name attribute

Related Topic