Introduction to jQuery checkbox Selector
The jQuery UI checkbox selector is used to selects an element of type checkbox. The jQuery UI checkbox selectors a built in type of option for input in the jQuery UI library. The jQuery UI checkbox type selector allows to select all the checkbox elements which are checked items of the checkbox type in the document. The checkbox type used to allow the user to select one or more choice of items. The ctrl button also can be used to select multiple elements.
Note that checkbox cannot gives good performance as the native DOM querySelectorAll() method gives because the checkbox is the extension of jQuery not part of the CSS specification.
Syntax:
$(":checkbox") – it is uses to selects input elements of type checkbox.Examples for jQuery UI checkbox Selector
Next, we write the html code to understand more clearly with the following example, where the checkbox selector type used to treat an html input element as checkbox selector element and we wrap the checkbox selector with some styles, as below –
Example #1
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery UI checkbox selector </title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(document).ready(function(){
$(":checkbox").wrap("<span style ='background-color: red'>");
});
</script>
</head>
<body>
<h1> Welcome to vegetables and fruits shop </h1>
<form action="">
<h2> Select vegetables </h2
Cabbage : <input type ="checkbox" name ="vegetables" value ="v1">
Cauliflower : <input type ="checkbox" name ="vegetables" value ="v2">
Onions : <input type ="checkbox" name ="vegetables" value ="v3">
Broccoli : <input type ="checkbox" name ="vegetables" value ="v4">
Carrot <input type ="checkbox" name ="vegetables" value ="v5">
Spinach<input type ="checkbox" name ="vegetables" value ="v6">
Mustard greens : <input type ="checkbox" name ="vegetables" value ="v7">
<h2> Select fruits </h2>
Apple : <input type ="checkbox" name ="fruits" value ="f1">
Banana : <input type ="checkbox" name ="fruits" value ="f2">
Orange : <input type ="checkbox" name ="fruits" value ="f3">
Grapes :<input type ="checkbox" name ="fruits" value ="f4">
Melons : <input type ="checkbox" name ="fruits" value ="f5"><br>
<input type ="submit" value ="Submit"><br>
</form>
</body>
</html>Output:
Once we select the item of the checkbox, the output is:
As in the above program, the checkboxes are created for the vegetables and fruits items by using the input element and by defining type attribute to checkbox as “type =”checkbox””, so now the user can select any vegetables and fruits by selecting the checkboxes.
Next, we rewrite the above html code to understand the jQuerycheckbox selector type where the checkbox selector used in the input elements and here we use the jQuery prop() method to track and check the current checkbox status, as below –
Example #2
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery UI checkbox selector </title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).prop("checked") == true){
$("#sel").html("Item or items are checked.");
}
else if($(this).prop("checked") == false){
$("#sel").html("Item or items are unchecked.");
}
});
});
</script>
</head>
<body>
<h1> Welcome to vegetables and fruits shop </h1>
<div id="sel" style="background: red;"></div>
<h2> Select vegetables </h2>
Cabbage : <input type ="checkbox" name ="vegetables" value ="v1">
Cauliflower : <input type ="checkbox" name ="vegetables" value ="v2">
Onions : <input type ="checkbox" name ="vegetables" value ="v3">
Broccoli : <input type ="checkbox" name ="vegetables" value ="v4">
Carrot <input type ="checkbox" name ="vegetables" value ="v5">
Spinach<input type ="checkbox" name ="vegetables" value ="v6">
Mustard greens : <input type ="checkbox" name ="vegetables" value ="v7">
<h2> Select fruits </h2>
Apple : <input type ="checkbox" name ="fruits" value ="f1">
Banana : <input type ="checkbox" name ="fruits" value ="f2">
Orange : <input type ="checkbox" name ="fruits" value ="f3">
Grapes :<input type ="checkbox" name ="fruits" value ="f4">
Melons : <input type ="checkbox" name ="fruits" value ="f5"><br><br>
</body>
</html>Output:
Once we select or deselect the item of the checkbox, the message displays as-
As in the above program, the checkboxes are created for the vegetables and fruits items and the prop() method is used which makes a very easy way to track the current checkbox status. So if we select any checkbox it will display a message “Item or items are checked.” And if deselect any checkbox it will display “Item or items are unchecked.” message.
Next, we write the html code to understand the jQuery checkbox selector where the checkbox type uses in the input element and we confirm an action whether it is checked or unchecked by displaying the message, as below –
Example #3
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery UI checkbox selector </title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(document).ready(function(){
$('input[type=checkbox]:checked').each(function () {
var status = (this.checked ? $(this).val() : "");
var name = $(this).attr("name");
$('#sel').append("<h3>" + name + " : " + status + "</h3>");
});
});
</script>
</head>
<body>
<h1> Welcome to vegetables and fruits shop </h1>
<div id="sel" style="background: red;"></div>
<h2> Select vegetables </h2>
Cabbage : <input type ="checkbox" name ="Cabbage" value ="10" checked="checked">
Cauliflower : <input type ="checkbox" name ="Cauliflower" value ="20">
Onions : <input type ="checkbox" name ="Onions" value ="25">
Broccoli : <input type ="checkbox" name ="Broccoli" value ="30">
Carrot <input type ="checkbox" name ="Carrot" value ="50" checked="checked">
Spinach<input type ="checkbox" name ="Spinach" value ="10">
Mustard greens : <input type ="checkbox" name ="Mustard greens" value ="40">
<h2> Select fruits </h2>
Apple : <input type ="checkbox" name ="Apple" value ="200" checked="checked">
Banana : <input type ="checkbox" name ="Banana" value ="30">
Orange : <input type ="checkbox" name ="Orange" value ="50">
Grapes :<input type ="checkbox" name ="Grapes" value ="55" checked="checked">
Melons : <input type ="checkbox" name ="Melon" value ="25"><br><br>
</body>
</html>Output:
Again in the above program, the checkboxes are created for the vegetables and fruits items, here it is selecting all the input elements of type checkbox and then adding only those input elements which are checked as “checked=” checked””.
Conclusion
The jQuery UI checkbox selector is a built in type of option for the input element of the jQuery UI library. It is used to selects an element of type checkbox. So with the checkbox selector, we can keep track of the status of the checkbox type of input.
Recommended Articles
This is a guide to jQuery checkbox Selector. Here we also discuss the introduction of jquery checkbox selector along with different examples and its code implementation. You may also have a look at the following articles to learn more –
8 Online Courses | 5 Hands-on Projects | 28+ Hours | Verifiable Certificate of Completion
4.5
View Course
Related Courses
