Toggle a radio button with jQuery

This post will discuss how to implement a toggle in an HTML radio button with jQuery.

The following code example demonstrates how to implement toggle when there are only two radio buttons:

JS

$(document).ready(function() {

$('#submit').click(function() {

$('input[type="radio"]').not(':checked').prop("checked", true);

});

HTML

<html>

<body>

<p>Select your favorite programming language:</p>

<div>

</div>

<button id="submit">Submit</button>

</div>

</body>

</html>

Edit in JSFiddle

If there are more than two radio buttons, you can use the following code:

JS

$(document).ready(function() {

$('#submit').click(function() {

var radios = $('input[type=radio]')

var current = radios.filter(':checked');

var next = radios.eq(radios.index(current) + 1);

if (next.length === 0) {

next = radios.first();

}

next.prop('checked', true);

});

HTML

<html>

<body>

<p>Select your favorite programming language:</p>

<div>

<label><input type="radio" name="language" value="python">Python</label>

</div>

<button id="submit">Submit</button>

</div>

</body>

</html>

Edit in JSFiddle

That’s all about toggling a radio button with jQuery.

Toggle a radio button with jQuery

JS

HTML

JS

HTML

Share this: