如何檢查每組復選框至少選中一個

Question

如何檢查每組復選框在提交時至少選中一個。 使用每個函數和每個組應該至少檢查復選框。問題是一個具有相同類名的動態復選框。 這將是越來越多的組。所以我需要給出條件，因為至少應該選中一個復選框。

使用每個函數：我會檢查復選框長度組是否大於零，但是如果檢查了任何組檢查，則提交正在發生。

<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>

任何幫助或建議表示贊賞。

Answer 1

你可以試試這個：

$("#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");
    });

這是UPDATED FIDDLE 。

編輯 1：返回真或假

目前， return返回false 。 因此，它將退出each循環。 如果您需要它繼續，即，轉到下一次迭代只需return true 。