如何检查每组复选框至少选中一个

Question

How to check each group of checkboxes is checked at least one on submit. Using each function and every group should check at least on checkbox .problem is a dynamic checkbox with the same class name. It would be more and more groups.So I need to give conditions as at least one checkbox should check.

Using each function: I ma checking whether the group of check box length is greater than zero but if any group check is checked submit is happening.

<div id='myContainer'>
    <div class="usra">
        <div class = "user1">
            <fieldset >
                <legend>allergies</legend>
                this is first group with same class "allergies"
                <div class="allergies">
                    <input type="checkbox" name="allergiesnme" value="Cat" />Cats <br />
                    <input type="checkbox" name="allergiesnme" value="Dog" />Dogs<br />
                    <input type="checkbox" name="allergiesnme" value="Bird" />Birds<br /> 
                </div>
            </fieldset>
            <fieldset >
                <legend>healthcondition</legend>
                this is second group "healthcondition" 
                <div class="healthcondition">
                    <input type="checkbox" name="healthnme" value="Cat" />Cats <br />
                    <input type="checkbox" name="healthnme" value="Dog" />Dogs<br />
                    <input type="checkbox" name="healthnme" value="Bird" />Birds<br />  
                </div>
            </fieldset>
        </div>
        <div class="user1">
            <fieldset class="allergies">
                <legend>allergies</legend>
                <div class="allergies">
                    <input type="checkbox" name="allergiesnme" value="Cat" />Cats <br />
                    <input type="checkbox" name="allergiesnme" value="Dog" />Dogs<br />
                    <input type="checkbox" name="allergiesnme" value="Bird" />Birds<br /> 
                </div>
            </fieldset>
            <fieldset class="healthcondition">
                <legend>healthcondition</legend>
                <div class="healthcondition">
                    <input type="checkbox" name="healthnme" value="Cat" />Cats <br />
                    <input type="checkbox" name="healthnme" value="Dog" />Dogs<br />
                    <input type="checkbox" name="healthnme" value="Bird" />Birds<br />  
                </div>
            </fieldset>
        </div>
    </div>
    <button type="button" id="clicksubmit">Click Me!</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--
    4. We've got an element in the DOM, we've created a template, and we've
    loaded the library - now it's time to build our Hello World app.
    -->
<script>
    var submitallergies = false; <!-- setting flag for one section ".allegies" --> 
    var submithealth = false; <!-- setting flag for one section ".healthcondition" -->

    every group should check at least one checkbox

    $("#clicksubmit")
      .click(function() {
        alert("inside");
        using each

        function of each ".user1"
        $('.user1')
          .each(function() {
            alert("user each");
            $('.allergies')
              .each(function() {
                var allergiescheck = $(".allergies input[name^=allergiesnme]:checked")
                  .length;
                alert("allergies each");
                if (allergiescheck > 0) {
                  alert("allergiescheck is greater than zero");
                  submitallergies = true;
                } else if (allergiescheck == 0) {
                  return false;
                }
              });

            $('.healthcondition')
              .each(function() {
                //alert(this.value +"health value"); 
                alert("healthcondition each");
                var healthcheck = $(".healthcondition input[name^=healthnme]:checked")
                  .length;
                if (healthcheck > 0) {
                  alert("healthcheck is greater than zero");
                  submithealth = true;
                } else if (healthcheck == 0) {
                  return false;
                }

              });

            if (submitallergies == true) {
              if (submithealth == true) {
                alert("submitted");
              } else {
                return false;
              }
            }

          });
      });
</script>

Any help or suggestion are appreciated.

Answer 1

You can try this:

$("#clicksubmit")
    .on('click', function(){
        var flag;
        $('.user1')
            .each(function(){
                flag = false;
                if(!$('.allergies input', $(this)).is(':checked'))
                    return false;
                if(!$('.healthcondition input', $(this)).is(':checked'))
                    return false;
                flag = true;
        });
        if (flag)
            alert("submitted");
        else
            alert("Not submitted");
    });

Here is the UPDATED FIDDLE .

Edit 1: Return true or false

Currently, return is returning false . So, it will exit the the each loop. If you need it to continue ie, go to the next iteration just return true .