This tutorial shows how we can get currently selected checkbox’s value using jQuery. We can easily use the power of jQuery to check which checkbox is selected using is(“:checked”) and get the selected checkbox’s value using $(‘[name=”checkbox name”]:checked’).val(). Here we will get the selected value when a checkbox is clicked, so jQuery’s click() function is used for capturing onclick event.

Prerequisites

Knowledge of HTML and jQuery
Final Output

Get selected checkbox value using jQuery

Now we will see how we can make this happen step by step

Step 1. Create an HTML file anywhere in your computer disk space.

Step 2. Write the below code inside <body></body> tag. Below code renders the checkboxes on the browser when the HTML file is run.

<div>
    <p>
    <input type="checkbox" name="flower" value="sunflower" />Sunflower
    </p>
    <p>
        <input type="checkbox" name="flower" value="rose" />Rose
    </p>
    <p>
        <input type="checkbox" name="flower" value="padma" />Padma
    </p>
</div>

Step 3. Now include the jQuery library from CDN inside the <head></head> tag

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Step 4. Write below code for getting selected checkbox’s value when clicked on a checkbox

<script>
    $(document).ready(function() {
        $('[name="flower"]').click(function() {
            if ($('[name="flower"]').is(":checked") > 0) {
                var checkedValue = $('[name="flower"]:checked').val();
                alert("Checked value : " + checkedValue);
            } else {
                alert("Checkbox is not checked");
            }
        });
    });
</script>

Step 5. Putting all together, the entire HTML file

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>jQuery Test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('[name="flower"]').click(function() {
                    if ($('[name="flower"]').is(":checked") > 0) {
                        var checkedValue = $('[name="flower"]:checked').val();
                        alert("Checked value : " + checkedValue);
                    } else {
                        alert("Checkbox is not checked");
                    }
                });
            });
        </script>
    </head>
    <body>
        <div>
            <p>
            <input type="checkbox" name="flower" value="sunflower" />Sunflower
            </p>
            <p>
                <input type="checkbox" name="flower" value="rose" />Rose
            </p>
            <p>
                <input type="checkbox" name="flower" value="padma" />Padma
            </p>
        </div>
    </body>
</html>

Step 6. Now run the above HTML file and check the checkbox.

That’s all. Thank you for reading.

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials Twitter Facebook  Google Plus Linkedin Or Email Me

Leave a Reply

Your email address will not be published. Required fields are marked *