Back to: jQuery Tutorials
jQuery Checked Selector with Examples
In this article, I am going to discuss jQuery Checked Selector with Examples. Please read our previous article, where we discussed jQuery $(‘input’) vs $(‘:input’) Selectors. At the end of this article, you will understand everything about the jQuery Checked selector.
jQuery checked selector
The jQuery checked selector selects all the radio and checkbox input elements that are checked. This is used to get the value of the radio or checkbox which the user has selected.
Syntax:
$(‘input[type=”radio”]:checked’): This will select all the radio input elements which are checked
$(‘input[type=”checkbox”]:checked’): This will select all the checkbox input elements which are checked
Example: jQuery Checked Selector with Radio button
We are creating basic radio input elements. In the below example, we first have found the length of the collection returned by $(‘input[type=”radio”]:checked’). Notice that the length of the collection is 1 because we have checked one radio button.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Checked Selector</title>
</head>
<body>
<section>
<form action="/">
<fieldset>
<legend>Male</legend>
<label>Male:
<input type="radio" name="radiogroup" value="Male" /></label>
<label>Female:
<input type="radio" name="radiogroup" value="Female"/></label>
</fieldset>
</form>
</section>
</br>
<button id="demo" value="submit">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#demo').click(function(){
const RadioChecked= $('input[type="radio"]:checked').length;
console.log(`Total ${RadioChecked} radio buttons are checked`);
});
});
</script>
</body>
</html>
Run the above HTML Code and then select one radio button and click on the Submit button as shown in the below image.
Now, open the browser developer’s tool by pressing the F12 key and then select the console tab and you should see the following log.
Example: jQuery Checked Selector with Check boxes
In the below example, we first have found the length of the collection returned by $(‘input[type=”checkbox”]:checked’).
<!DOCTYPE html>
<html>
<head>
<title>jQuery Checked Selector with Check Boxes</title>
</head>
<body>
<section>
<form action="/">
<fieldset>
<legend>Skillset: </legend>
<label>HTML:
<input type="checkbox" name="checkgroup[]" value="HTML" /></label>
<label>CSS:
<input type="checkbox" name="checkgroup[]" value="CSS"/></label>
<label>JavaScript:
<input type="checkbox" name="checkgroup[]" value="JavaScript"/></label>
<label>jquery:
<input type="checkbox" name="checkgroup[]" value="jquery"/></label>
</fieldset>
</form>
</section> </br>
<button id="demo" value="submit">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#demo').click(function(){
const CheckboxChecked= $('input[type="checkbox"]:checked').length;
console.log(`Total ${CheckboxChecked} checkboxes are checked`);
});
});
</script>
</body>
</html>
Run the above HTML Code and then select two checkboxes and click on the Submit button as shown in the below image.
Now, open the browser developer’s tool by pressing the F12 key and then select the console tab and you should see the following log. Notice that the length of the collection is 2 because we have checked two checkboxes.
Example:
In the below example, we will try to get the value of the radio or checkboxes which the user has checked. Here we are applying each method to the checked radio buttons and printing the value on the console.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Checked Selector</title>
</head>
<body>
<section>
<form action="/">
<fieldset>
<legend>Male</legend>
<label>Male:
<input type="radio" name="radiogroup" value="Male" /></label>
<label>Female:
<input type="radio" name="radiogroup" value="Female"/></label>
</fieldset>
</form>
</section> </br>
<button id="demo" value="submit">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#demo').click(function(){
$('input[type="radio"]:checked').each(function(){
console.log($(this).val());
})
});
});
</script>
</body>
</html>
Run the above HTML Code and then select the Female radio button and click on the Submit button as shown in the below image.
Now, open the browser developer’s tool by pressing the F12 key and then select the console tab and you should see the following log. Notice that, we have checked the Male radio button and that is displayed on the console.
Example:
In the below example, we are applying each method to the checked checkbox buttons and printing the value on the console.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Checked Selector</title>
</head>
<body>
<section>
<form action="/">
<fieldset>
<legend>Skillset: </legend>
<label>HTML:
<input type="checkbox" name="checkgroup[]" value="HTML" /></label>
<label>CSS:
<input type="checkbox" name="checkgroup[]" value="CSS"/></label>
<label>JavaScript:
<input type="checkbox" name="checkgroup[]" value="JavaScript"/></label>
<label>jquery:
<input type="checkbox" name="checkgroup[]" value="jquery"/></label>
</fieldset>
</form>
</section>
</br>
<button id="demo" value="submit">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#demo').click(function(){
$('input[type="checkbox"]:checked').each(function(){
console.log($(this).val());
})
});
});
</script>
</body>
</html>
Run the above HTML Code and then select the HTML and CSS checkboxes and click on the Submit button as shown in the below image.
Now, open the browser developer’s tool by pressing the F12 key and then select the console tab and you should see the following log. Notice that, we have checked HTML and CSS & checkboxes and that is displayed on the console.
Example:
Now let’s see an example in which both radio and checkbox elements are present. In the below example, we have two buttons ‘Get radio value’, ‘Get checkbox value’. If we click on the 1st button, we will see only the radio buttons which we have selected. And the same with the checkbox button
<!DOCTYPE html>
<html>
<head>
<title>jQuery Checked Selector</title>
</head>
<body>
<section>
<form action="/">
<fieldset>
<legend>Male</legend>
<label>Male:
<input type="radio" name="radiogroup" value="Male" /></label>
<label>Female:
<input type="radio" name="radiogroup" value="Female" /></label>
</fieldset>
<fieldset>
<legend>Skillset: </legend>
<label>HTML:
<input type="checkbox" name="checkgroup[]" value="HTML" /></label>
<label>CSS:
<input type="checkbox" name="checkgroup[]" value="CSS" /></label>
<label>JavaScript:
<input type="checkbox" name="checkgroup[]" value="JavaScript" /></label>
<label>jquery:
<input type="checkbox" name="checkgroup[]" value="jquery" /></label>
</fieldset>
</form>
</section>
</br>
<button class="demo" id="radio" value="submit">Get radio value</button>
<button class="demo" id="checkbox" value="submit">Get checkbox value</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#checkbox').click(function () {
let options = [];
$('input[type="checkbox"]:checked').each(function () {
options.push($(this).val());
})
alert(`You have selected the options ${options.join(", ")}`)
});
$('#radio').click(function () {
$('input[type="radio"]:checked').each(function () {
alert(`You have selected ${$(this).val()}`);
})
});
});
</script>
</body>
</html>
Now, run the above HTML code and check yourself.
In the next article, we will discuss How to Select values of the checkbox group with jQuery with Examples. Here, in this article, I try to explain jQuery Checked Selector with Examples and I hope you enjoy the jQuery checked selector article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.