The ':checkbox Selector' is used to select all the input elements with type="checkbox".
Say, for example, if you want something to be entered by the user.
And HTML uses the <input> element to achieve the above.
Let us learn more with the below example.
<html>
<head>
<title> My First Programme </title>
</head>
<body>
<h1> JQuery </h1>
<span> Select the values :: </span>
<input type = "checkbox" name = "anyName"> Blue
<input type = "checkbox" name = "anyName"> Green
<br/><br/>
<button> Click me </button>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
<script>
$('button').click( function() {
$(':checkbox').hide();
});
</script>
</body>
</html>
So, if you see the above code. We can see that there are three input elements. The first two,
<input type = "checkbox" name = "anyName"> <input type = "checkbox" name = "anyName">
Has the <input> tag.
While the third one is a button.
<button> Click me </button>
Yes! A <button> is also an input element.
And we want to hide those input elements that has 'type = "checkbox"'(Using 'hide()' function provided by JQuery).
And we can see that there are two <input> element that has 'type = "checkbox"'.
Thus the checkbox,
<input type = "checkbox" name = "anyName"> <input type = "checkbox" name = "anyName">
Gets hidden.
And this happened with the ':checkbox' element selector.
$('button').click( function() {
$(':checkbox').hide();
});The moment the button is clicked, JQuery statement gets triggered.
$(':checkbox').hide();And the JQuery code locates the input element of type checkbox and hides them.