DEV Community

Cover image for How To Loop Checkbox Checked Value in jQuery
Code And Deploy
Code And Deploy

Posted on • Edited on

6 3

How To Loop Checkbox Checked Value in jQuery

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/jquery/how-to-loop-checkbox-checked-value-in-jquery

Advanced Laravel SAAS Starter Kit with CRUD Generator

Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!

In this post, I will share on how to loop the checkbox checked value using jquery. One of the important to learn when processing the form about getting checked the multiple value of checkbox and submit it to your server-side using ajax.

how-to-loop-checkbox-checked-value-in-jquery

As you can see above example we have the list of animals and we will display the result after we select and submit the button. After submitting the button this is the result now.

how-to-loop-checkbox-checked-value-in-jquery

As you can see we listed the checked animals. Now let's see the complete code of this function.

You must check each comment so that you know how it works.



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Loop Checkbox Value in jQuery</title>

    <style type="text/css">
        .result-wrapper {
            display: none;
        }
    </style>
</head>
<body>
    <form>
        <label>What animals you have at home?</label>

        <div>
            <input type="checkbox" name="animals" class="animals" value="Dog"> Dog
        </div>
        <div>
            <input type="checkbox" name="animals" class="animals" value="Cat"> Cat
        </div>
        <div>
            <input type="checkbox" name="animals" class="animals" value="Pig"> Pig
        </div>
        <br/>
        <button type="button" id="submit">Submit</button>
    </form>

    <div class="result-wrapper">
        <h3>Result:</h3>
        <div id="result"></div>
    </div>

    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

  <script type="text/javascript">
    $(document).ready(function() {

        $("#submit").on("click", function() {
            // define the checkbox using name="animals"
            // note: you can do it with class also like this $('.animals')
            var animals = $('[name="animals"]');

            // define html variable to store the result
            var html = "<ul>";

            $.each(animals, function() {
                var $this = $(this);

                // check if the checkbox is checked
                if($this.is(":checked")) {
                    // put the checked animal value to the html list
                    html += "<li>"+$this.val()+"</li>";
                }
            }); 
            html += "</ul>";

            // put the result in #result element
            $(".result-wrapper #result").html(html);

            // show the result-wrapper class element
            $(".result-wrapper").show();
        });


    });
  </script>
</body>
</html>


Enter fullscreen mode Exit fullscreen mode

Advanced Laravel SAAS Starter Kit with CRUD Generator

Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/jquery/how-to-loop-checkbox-checked-value-in-jquery if you want to download this code.

Happy coding :)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay