jQuery | :checked Selector

Last Updated : 22 Feb, 2019

The :checked selector is used to select the all checked checkboxes, radio buttons and options of select elements.

Note: To retrieve only the selected options of select elements, use :selected selector.

Syntax:

$(":checked")

Below examples illustrate the :checked selector in jQuery:

Example 1: This example applies CSS to all checked elements(in this example, checkboxes).

<!DOCTYPE html>  
<html>  
  
<head> 
    <title> 
        jQuery | :checked Selector
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <!-- Script to set style in checked selector -->
    <script>
        $(document).ready(function() {
            $(":checked").wrap("<span style='background-color:blue'>");
        });
    </script>
      
    <style>
        form {
            font-weight: bold;
            font-size: 25px;
            color: green;
        }
    </style>
</head> 
         
<body style="text-align:center;">  
     
    <h1>  
        jQuery | :checked Selector
    </h1>  
             
    <form action="">
        GeeksForGeeks_1 <input type="checkbox" name="GFG_1"
                value="GFG_1" checked="checked" ><br>
                  
        GeeksForGeeks_2 <input type="checkbox" name="GFG_2"
                value="GFG_2"  ><br>
        GeeksForGeeks_3 <input type="checkbox" name="GFG_3"
                value="GFG_3" checked="checked" ><br>
    </form> 
</body>  
  
</html>  

Output:

Example 2: This example uses checked selector on radio buttons.

<!DOCTYPE html>  
<html>  
  
<head> 
    <title> 
        jQuery | :checked Selector
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <!-- Script to set style in checked selector -->
    <script>
        $(document).ready(function() {
            $(":checked").wrap("<span style='background-color:red'>");
        });
    </script>
      
    <style>
        form {
            font-weight: bold;
            font-size: 25px;
            color: green;
        }
    </style>
      
</head> 
         
<body style="text-align:center;">  
  
    <h1>  
        jQuery | :checked Selector
    </h1>  
             
    <form action="">
        GeeksForGeeks_1 <input type="radio" name="GFG_1"
                value="GFG_1" checked="checked" ><br>
                  
        GeeksForGeeks_2 <input type="radio" name="GFG_2"
                value="GFG_2"  ><br>
                  
        GeeksForGeeks_3 <input type="radio" name="GFG_3"
                value="GFG_3" checked="checked" ><br>
    </form> 
</body>  
  
</html>    

Output:

My Personal Notes

Related Articles