jQuery Checked Selector

jQuery Checked Selector with Examples

In this article, I am going to discuss jQuery Checked Selector with Examples. Please read our previous article, where we discussed jQuery $(‘input’) vs $(‘:input’) Selectors. At the end of this article, you will understand everything about the jQuery Checked selector.

jQuery checked selector

The jQuery checked selector selects all the radio and checkbox input elements that are checked. This is used to get the value of the radio or checkbox which the user has selected.

Syntax:
$(‘input[type=”radio”]:checked’): This will select all the radio input elements which are checked
$(‘input[type=”checkbox”]:checked’): This will select all the checkbox input elements which are checked

Example: jQuery Checked Selector with Radio button

We are creating basic radio input elements. In the below example, we first have found the length of the collection returned by $(‘input[type=”radio”]:checked’). Notice that the length of the collection is 1 because we have checked one radio button.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Checked Selector</title>
</head>
<body>
    <section>
        <form action="/">
     <fieldset>
                <legend>Male</legend>
                <label>Male:
                    <input type="radio"  name="radiogroup" value="Male" /></label>
                <label>Female:
                    <input type="radio"  name="radiogroup" value="Female"/></label>
            </fieldset>
       </form>
    </section>
    </br>
    <button id="demo" value="submit">Submit</button>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function(){
                const RadioChecked= $('input[type="radio"]:checked').length;
                console.log(`Total ${RadioChecked} radio buttons are checked`);
            });                
        });
    </script>
</body>
</html>

Run the above HTML Code and then select one radio button and click on the Submit button as shown in the below image.

jQuery Checked Selector with Radio button

Now, open the browser developer’s tool by pressing the F12 key and then select the console tab and you should see the following log.

jQuery Checked Selector Example with Radio button

Example: jQuery Checked Selector with Check boxes

In the below example, we first have found the length of the collection returned by $(‘input[type=”checkbox”]:checked’).

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Checked Selector with Check Boxes</title>
</head>
<body>
    <section>
        <form action="/">
            <fieldset>
                <legend>Skillset: </legend>
                <label>HTML:
                    <input type="checkbox" name="checkgroup[]" value="HTML" /></label>
                <label>CSS:
                    <input type="checkbox" name="checkgroup[]" value="CSS"/></label>
                <label>JavaScript:
                    <input type="checkbox" name="checkgroup[]" value="JavaScript"/></label>
                <label>jquery:
                    <input type="checkbox"  name="checkgroup[]" value="jquery"/></label>
            </fieldset>
      </form>
    </section> </br>

    <button id="demo" value="submit">Submit</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function(){
               const CheckboxChecked= $('input[type="checkbox"]:checked').length;
                console.log(`Total ${CheckboxChecked} checkboxes are checked`);
            });               
        });
    </script>
</body>
</html>

Run the above HTML Code and then select two checkboxes and click on the Submit button as shown in the below image.

jQuery Checked Selector with Check boxes

Now, open the browser developer’s tool by pressing the F12 key and then select the console tab and you should see the following log. Notice that the length of the collection is 2 because we have checked two checkboxes.

jQuery Checked Selector Example with Check boxes

Example:

In the below example, we will try to get the value of the radio or checkboxes which the user has checked. Here we are applying each method to the checked radio buttons and printing the value on the console.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Checked Selector</title>
</head>
<body>
    <section>
        <form action="/">
           <fieldset>
                <legend>Male</legend>
                <label>Male:
                    <input type="radio"  name="radiogroup" value="Male" /></label>
                <label>Female:
                    <input type="radio"  name="radiogroup" value="Female"/></label>
           </fieldset>
       </form>
    </section> </br>

 <button id="demo" value="submit">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function(){
              $('input[type="radio"]:checked').each(function(){
                  console.log($(this).val());
              })
            });        
        });
    </script>
</body>
</html>

Run the above HTML Code and then select the Female radio button and click on the Submit button as shown in the below image.

Checked Selector in jQuery

Now, open the browser developer’s tool by pressing the F12 key and then select the console tab and you should see the following log. Notice that, we have checked the Male radio button and that is displayed on the console.

Checked Selector in jQuery with Examples

Example:

In the below example, we are applying each method to the checked checkbox buttons and printing the value on the console.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Checked Selector</title>
</head>
<body>
    <section>
        <form action="/">
            <fieldset>
                <legend>Skillset: </legend>
                <label>HTML:
                    <input type="checkbox" name="checkgroup[]" value="HTML" /></label>
                <label>CSS:
                    <input type="checkbox" name="checkgroup[]" value="CSS"/></label>
                <label>JavaScript:
                    <input type="checkbox" name="checkgroup[]" value="JavaScript"/></label>
                <label>jquery:
                    <input type="checkbox"  name="checkgroup[]" value="jquery"/></label>
            </fieldset>
       </form>
    </section>
    </br>
    <button id="demo" value="submit">Submit</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function(){
              $('input[type="checkbox"]:checked').each(function(){
                  console.log($(this).val());
              })
            });    
                      
        });
    </script>
</body>
</html>

Run the above HTML Code and then select the HTML and CSS checkboxes and click on the Submit button as shown in the below image.

jQuery Checked Selector with Examples

Now, open the browser developer’s tool by pressing the F12 key and then select the console tab and you should see the following log. Notice that, we have checked HTML and CSS & checkboxes and that is displayed on the console.

jQuery Checked Selector with Examples

Example:

Now let’s see an example in which both radio and checkbox elements are present. In the below example, we have two buttons ‘Get radio value’, ‘Get checkbox value’. If we click on the 1st button, we will see only the radio buttons which we have selected. And the same with the checkbox button

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Checked Selector</title>
</head>
<body>
    <section>
        <form action="/">
            <fieldset>
                <legend>Male</legend>
                <label>Male:
                    <input type="radio" name="radiogroup" value="Male" /></label>
                <label>Female:
                    <input type="radio" name="radiogroup" value="Female" /></label>
            </fieldset>

            <fieldset>
                <legend>Skillset: </legend>
                <label>HTML:
                    <input type="checkbox" name="checkgroup[]" value="HTML" /></label>
                <label>CSS:
                    <input type="checkbox" name="checkgroup[]" value="CSS" /></label>
                <label>JavaScript:
                    <input type="checkbox" name="checkgroup[]" value="JavaScript" /></label>
                <label>jquery:
                    <input type="checkbox" name="checkgroup[]" value="jquery" /></label>
            </fieldset>
        </form>
    </section>
    </br>
    <button class="demo" id="radio" value="submit">Get radio value</button>
    <button class="demo" id="checkbox" value="submit">Get checkbox value</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#checkbox').click(function () {
                let options = [];
                $('input[type="checkbox"]:checked').each(function () {
                    options.push($(this).val());
                })
                alert(`You have selected the options ${options.join(", ")}`)
            });
            $('#radio').click(function () {
                $('input[type="radio"]:checked').each(function () {
                    alert(`You have selected ${$(this).val()}`);
                })
            });
        });
    </script>
</body>
</html>

Now, run the above HTML code and check yourself.

In the next article, we will discuss How to Select values of the checkbox group with jQuery with Examples. Here, in this article, I try to explain jQuery Checked Selector with Examples and I hope you enjoy the jQuery checked selector article.

Leave a Reply

Your email address will not be published.