Home/ Questions/Q 7511261
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T23:29:42+00:00

My HTML form contains many checkbox groups,I want to check if atleast one checkbox

  • 0

My HTML form contains many checkbox groups,I want to check if atleast one checkbox is selected from every group.

For example 

// Group vehicle
<input type="checkbox" name="vehicle" value="Bike"/> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car"/> I have a car <br/>   

// Group language
<input type="checkbox" name="language" value="JS"/> I am JS Ninja <br/>
<input type="checkbox" name="language" value="Android"/> I am a droid <br/>

I can use following Jquery selector to check if at least one checkbox is selected 

if($(":checkbox:checked[vehicle]").length) > 1
if($(":checkbox:checked[language]").length) > 1

But I have to repeat this selector for every checkbox group. My page contains many checkbox groups. Is there any other way by which I can select all checkbox groups in single jquery selector?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Updated as promised, once I had the time to fully test the original example code. I see you guys went a little overboard, it only needed some minor adjustments to function 😀

    I also made it a bit more efficient by not repeating the jQuery checkbox selectors multiple times.

    And the result:

    <html>
<head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        function checkedTest() {
            var nameArr = new Array();
            var finalResult = true;
            var allCheckboxes = $("input[type=checkbox]");

            // Put all the unique name attributes in an array.
            allCheckboxes.each(function(){
                var name = $(this).attr("name");
                if($.inArray(name, nameArr) == -1)
                    nameArr.push(name);
            });

            // Go through each name attribue and make sure at least one is checked.
            $.each(nameArr, function(index, value){
                if(allCheckboxes.filter("[name=" + value + "]:checked").length == 0)
                    finalResult = false;
            });

            return finalResult;
        }
    </script>
</head>
<body>
    Group1Box1: <input type="checkbox" id="group1Box1" name="group1"/>
    Group1Box2: <input type="checkbox" id="group1Box2" name="group1"/>
    <br/>
    Group2Box1: <input type="checkbox" id="group2Box1" name="group2"/>
    Group2Box2: <input type="checkbox" id="group2Box2" name="group2"/>
    <br/>
    Group3Box1: <input type="checkbox" id="group3Box1" name="group3"/>
    Group3Box2: <input type="checkbox" id="group3Box2" name="group3"/>
    <br/><br/>
    <input type="button" value="Test!" onclick="alert(checkedTest());"/>
</body>
</html>
    • 0