jQuery Radio & Switch Tutorials

Radio button is used when developer wants users to select only one option in a list. For example, to check if a user is a male or female.

Best Radio Plugins

• Bootstrap Switch – Turn checkboxes and radio buttons into toggle switches. It depends on Bootstrap framework, and it compatible with Bootstrap 4, Bootstrap 3 and Bootstrap 2.
• Magic Check – Beautify Radio and Checkbox with pure CSS.
• Labelauty – A nice and lightweight jQuery plugin that gives beauty to checkboxes and radio buttons and allows custom labels for each status of (un)checked inputs.
• ezMark – It style radio buttons using background images.

Get the value of selected radio button in jQuery

:checked selector returns radio field which is checked.

<input type="radio" name="sex" value="male">
<input type="radio" name="sex" value="female">
<input type="button" id="submit" value="Submit">

$(document).ready(function(){
	$("#submit").on('click', function(){
	    var selected = $("input[name='sex']:checked").val();
	    if(selected){
	        console.log("Your choice is " + selected);
	    }
	});
});

Get value on change

$('input[type="radio"]).on('change', function() {
    console.log($(this).val())
});