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

时间:2015-09-27 07:34:38

标签: javascript jquery html

如果检查每组复选框,则至少在提交时检查一个。 使用每个函数和每个组应至少检查复选框.problem是一个具有相同类名的动态复选框。这将是越来越多的团体。所以我需要提供条件,因为至少应该检查一个复选框。

使用每个功能:我检查复选框长度组是否大于零,但如果选中任何组检查,则提交正在进行。

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

感谢任何帮助或建议。

1 个答案:

答案 0 :(得分: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:返回true或false

目前,return正在返回false。因此,它将退出each循环。如果您需要它继续,即转到下一个迭代return true