❮❮ PREV

SELECTORS - :checked Selector

The ':checked Selector' is used to select all the input elements with type="checkbox" and type="radio" that are checked.

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.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<span> Select the values :: </span>
    	<input type = "checkbox" name = "anyName" checked="checked"> 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() { 
            	$(':checked').hide();
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there are three input elements. The first two,

<input type = "checkbox" name = "anyName" checked="checked">
<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 'checked = "checked"'(Using 'hide()' function provided by JQuery).

In other words, we can see that the element,

<input type = "checkbox" name = "anyName" checked="checked">

Has the value as ticked.

Thus the checkbox,

<input type = "checkbox" name = "anyName" checked="checked">

Gets hidden.

And this happened with the ':checked' element selector.

$('button').click( function() {
	$(':checked').hide();
});

The moment the button is clicked, JQuery statement gets triggered.

$(':checked').hide();

And the JQuery code locates the input element of type checkbox that is checked and hides them.

Also remember if you tick/check the other checkbox,

<input type = "checkbox" name = "anyName">

That will also get hidden. You can try it in the above output.

❮❮ PREV