CODEWITHSUNDEEP
javascriptjqueryhtmlradio-button
jgok222
jgok222

Reputation: 414

adding onclick events to radio buttons in jquery

I have the following html

<div id="test"></div>
<div id="test2">
    <input type="radio" id="RBtest1">Yes</input>
    <input type="radio" id="RBtest2">No</input>
</div>

and the following javascript 

    $('#RBtest1').onclick = function () {
        alert("Test");
        $('#RBtest1').prop('checked', true).checkboxradio('refresh');
        $('#RBtest2').prop('checked', false).checkboxradio('refresh');
    };

    $('#RBtest2').onclick = function () {
        $('#RBtest2').prop('checked', true).checkboxradio('refresh');
        $('#RBtest1').prop('checked', false).checkboxradio('refresh');
        $('#test').append('test');
    };

This javascript fires after page load but yet when I click on the radio buttons nothing happens. Can someone see where I have gone wrong on this please.

Upvotes: 0

Views: 9187

Answers (4)

Jai
Jai

Reputation: 74738

Actually you don't need jquery to change the property of radio because radios has that check/uncheck functionalities if you group them with giving same names:

<input type="radio" name='ans' id="RBtest1">Yes</input>
<input type="radio" name='ans' id="RBtest2">No</input>

Try this:

$('#RBtest1')[0].onclick = function () {
   alert("Test");
   $('#RBtest1').prop('checked', true).checkboxradio('refresh');
   $('#RBtest2').prop('checked', false).checkboxradio('refresh');
};

$('#RBtest2')[0].onclick = function () {
   $('#RBtest2').prop('checked', true).checkboxradio('refresh');
   $('#RBtest1').prop('checked', false).checkboxradio('refresh');
   $('#test').append('test');
};

As we can see you are mixing jQuery and javascript selector and events while you can do this in native js too but jquery is great if you do this way:

$('#RBtest1').click(function () {
   alert("Test");
   $('#RBtest1').prop('checked', true).checkboxradio('refresh');
   $('#RBtest2').prop('checked', false).checkboxradio('refresh');
});

$('#RBtest2').click(function () {
   $('#RBtest2').prop('checked', true).checkboxradio('refresh');
   $('#RBtest1').prop('checked', false).checkboxradio('refresh');
   $('#test').append('test');
});

Upvotes: 0

Ark
Ark

Reputation: 101

radiobutton have onchange event.

Try this code 

$(document).ready(function () {
    $("input[type=radio]").on("change", function () {
        var item = this;
        if (item.id == "RBtest2") $('#test').append('test');
        else {$('#test').html("");}
    });

});

Example : JSFIDDLE

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can use common name attribute to make them single select:

 <input type="radio" name="r1" id="RBtest1">Yes</input>
 <input type="radio" name="r1" id="RBtest2">No</input>

Update:: the click event doesnt work as you are trying to bind javascript click event to jquery object. You should either use $('#RBtest1')[0],$('#RBtest2')[0] to use with javascript click event. Or use jquery click event:

 $('#RBtest1').click(function () {
   alert("Test");
   $('#RBtest1').prop('checked', true).checkboxradio('refresh');
   $('#RBtest2').prop('checked', false).checkboxradio('refresh');
 });

 $('#RBtest2').click(function () {
   $('#RBtest2').prop('checked', true).checkboxradio('refresh');
   $('#RBtest1').prop('checked', false).checkboxradio('refresh');
   $('#test').append('test');
 );

Upvotes: 2

Chris Lear
Chris Lear

Reputation: 6742

Your jquery is wrong. Here's a possible fix

$('#RBtest1').click(function () {
    alert("Test");
    $('#RBtest1').prop('checked', true).checkboxradio('refresh');
    $('#RBtest2').prop('checked', false).checkboxradio('refresh');
});

$('#RBtest2').click(function () {
    $('#RBtest2').prop('checked', true).checkboxradio('refresh');
    $('#RBtest1').prop('checked', false).checkboxradio('refresh');
    $('#test').append('test');

});

Upvotes: 1

Related Questions