Skip to content
Related Articles

Related Articles

jQuery :checked Selector

Improve Article
Save Article
  • Last Updated : 14 Nov, 2022
Improve Article
Save Article

The jQuery :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). 

HTML




<!DOCTYPE html>
<html>
<head>
  <title>
    jQuery | :checked Selector
  </title>
  <script src=
  </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. 

HTML




<!DOCTYPE html>
<html>
<head>
  <title>
    jQuery | :checked Selector
  </title>
  <script src=
  </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 arrow_drop_up
Related Articles

Start Your Coding Journey Now!