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.

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.

• javascript
• jquery
• html
• radio-button

4 Answers 4

You can use mon 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');
 );

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');

});

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

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');
});