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

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close