Jquery 验证多个复选框，至少需要一个复选框

我们正在创建一个广告表单，我们的jQuery编码人员在叙利亚，不幸的是，在那里陷入了丑陋

因此，虽然他目前无法帮助我们编写一些代码，但我认为有一个问题可以很容易地解决

我们有一个阶梯式的表格，你知道：完成第一步，进入第二步等等。 在步骤4中，我们有多个复选框，要求用户至少选中一个复选框

如果他们选中一个，则可以继续下一步。。如果他们没有单击任何按钮，我们将显示一条错误消息

这就是我们的js：

(function($) {
$.fn.formToWizard = function(options) {
    options = $.extend({  
        submitButton: "" 
    }, options); 

    var element = this;

    var steps = $(element).find("fieldset");
    var count = steps.size();
    var submmitButtonName = "#" + options.submitButton;
    $(submmitButtonName).hide();

    // 2
    $(element).before("<ul id='steps'></ul>");

    steps.each(function(i) {
        $(this).wrap("<div id='step" + i + "'></div>");
        $(this).append("<p id='step" + i + "commands'></p>");

        // 2
        var name = $(this).find("legend").html();
        $("#steps").append("<li id='stepDesc" + i + "'>Step " + (i + 1) + "<span>" + name + "</span></li>");

        if (i == 0) {
            createNextButton(i);
            selectStep(i);
        }
        else if (i == count - 1) {
            $("#step" + i).hide();
            createPrevButton(i);
        }
        else {
            $("#step" + i).hide();
            createPrevButton(i);
            createNextButton(i);
        }
    });

    function createPrevButton(i) {
        var stepName = "step" + i;
        $("#" + stepName + "commands").append("<a href='javascript:;' id='" + stepName + "Prev' class='purple button'>Back</a>&nbsp;");

        $("#" + stepName + "Prev").bind("click", function(e) {
            $("#" + stepName).hide();

            if($(this).attr('id') == "step4Prev" && $('li#stepDesc3 del').legnth > 0){
                i--;
            }
            $("#step" + (i - 1)).show();
            $(submmitButtonName).hide();
            selectStep(i - 1);
        });
    }

    function createNextButton(i) {
        var stepName = "step" + i;
        $("#" + stepName + "commands").append("<a href='javascript:;' id='" + stepName + "Next' class='purple button'>Next</a>");

        $("#" + stepName + "Next").bind("click", function(e) {
            var div = $('div#'+ stepName);
            $(div).find('.field_help').remove();
            if( $(div).find('input:text[value=""]').length > 0 ||
                $(div).find('input:checkbox:not(:checked)').length > 0 ||
                $(div).find('select option:first-child:selected').length > 0 ||
                $(div).find('textarea').val() == ""
                ){
                    $(div).prepend('<p class="field_help"> Please complete all fields before moving to next step</p>');
                    return false;
                }
            if($(this).attr('id') == "step2Next" ){
                if($(div).find('select[name="type"]').val() == "land"){
                    i++;
                    $('li#stepDesc3').html('<del>'+$('li#stepDesc3').html()+'</del>');
                }else{
                    if($('li#stepDesc3 del').legnth > 0){
                        $('li#stepDesc3').html($('li#stepDesc3 del').html());
                    }
                }
            }

            $("#" + stepName).hide();
            $("#step" + (i + 1)).show();
            if (i + 2 == count)
                $(submmitButtonName).show();
            selectStep(i + 1);
        });
    }

    function selectStep(i) {
        $("#steps li").removeClass("current");
        $("#stepDesc" + i).addClass("current");
    }

}
})(jQuery);

这是复选框的窗体区域：

<div class="master-container">
                <div class="lefthandblock">
                    <div class="sort left">
                        <span id="checkbox3Wrap" class="styledCheckboxWrap"><input type="checkbox" class="styledCheckbox" onclick="setCheckboxDisplay(this)" name="internal[]" value="heating" id="checkbox3" /></span><p class="labeller">Heating</p>
                        <span id="checkbox4Wrap" class="styledCheckboxWrap"><input type="checkbox" class="styledCheckbox" onclick="setCheckboxDisplay(this)" name="internal[]" value="aircon" id="checkbox4" /></span><p class="labeller">Air Conditioning</p>
                        <span id="checkbox5Wrap" class="styledCheckboxWrap"><input type="checkbox" class="styledCheckbox" onclick="setCheckboxDisplay(this)" name="internal[]" value="ensuite" id="checkbox5" /></span><p class="labeller">Master En-suite</p>
                        <span id="checkbox6Wrap" class="styledCheckboxWrap"><input type="checkbox" class="styledCheckbox" onclick="setCheckboxDisplay(this)" name="internal[]" value="builtins" id="checkbox6" /></span><p class="labeller">Built in Robes</p>
                        <span id="checkbox7Wrap" class="styledCheckboxWrap"><input type="checkbox" class="styledCheckbox" onclick="setCheckboxDisplay(this)" name="internal[]" value="newkitchen" id="checkbox7" /></span><p class="labeller">New Kitchen</p>
                        <span id="checkbox8Wrap" class="styledCheckboxWrap"><input type="checkbox" class="styledCheckbox" onclick="setCheckboxDisplay(this)" name="internal[]" value="rumpus" id="checkbox8" /></span><p class="labeller">Rumpus / Family Room</p>
                        <span id="checkbox9Wrap" class="styledCheckboxWrap"><input type="checkbox" class="styledCheckbox" onclick="setCheckboxDisplay(this)" name="internal[]" value="intspa" id="checkbox9" /></span><p class="labeller">Inside spa</p>
                        <span id="checkbox10Wrap" class="styledCheckboxWrap"><input type="checkbox" class="styledCheckbox" onclick="setCheckboxDisplay(this)" name="internal[]" value="media" id="checkbox10" /></span><p class="labeller">Media Room</p>
                    </div>  
                </div>
                <!--//left hand-->
                <!--right hand-->
                <div class="righthandblock">
                    <div class="sort left">
                        <span id="checkbox11Wrap" class="styledCheckboxWrap"><input type="checkbox" class="styledCheckbox" onclick="setCheckboxDisplay(this)" name="internal[]" value="fans" id="checkbox11" /></span><p class="labeller">Ceiling Fans</p>
                        <span id="checkbox12Wrap" class="styledCheckboxWrap"><input type="checkbox" class="styledCheckbox" onclick="setCheckboxDisplay(this)" name="internal[]" value="highceilings" id="checkbox12" /></span><p class="labeller">High Ceilings</p>
                        <span id="checkbox13Wrap" class="styledCheckboxWrap"><input type="checkbox" class="styledCheckbox" onclick="setCheckboxDisplay(this)" name="internal[]" value="insulated" id="checkbox13" /></span><p class="labeller">Insulated</p>
                        <span id="checkbox14Wrap" class="styledCheckboxWrap"><input type="checkbox" class="styledCheckbox" onclick="setCheckboxDisplay(this)" name="internal[]" value="phase" id="checkbox14" /></span><p class="labeller">3 Phase Power</p>
                        <span id="checkbox15Wrap" class="styledCheckboxWrap"><input type="checkbox" class="styledCheckbox" onclick="setCheckboxDisplay(this)" name="internal[]" value="internet" id="checkbox15" /></span><p class="labeller">Broadband / Internet</p>
                        <span id="checkbox16Wrap" class="styledCheckboxWrap"><input type="checkbox" class="styledCheckbox" onclick="setCheckboxDisplay(this)" name="internal[]" value="floor" id="checkbox16" /></span><p class="labeller">Polished Floors</p>
                        <span id="checkbox17Wrap" class="styledCheckboxWrap"><input type="checkbox" class="styledCheckbox" onclick="setCheckboxDisplay(this)" name="internal[]" value="granny" id="checkbox17" /></span><p class="labeller">Granny Flat</p>
                    </div>  
                </div>
            </div>

问题是，目前javascript只会在用户勾选每个复选框时进行验证

也许这很明显，也许不是，但我无法理解

增加：

勾选复选框后，这是html

<span id="checkbox4Wrap" class="styledCheckboxWrap wrapChecked">
<input id="checkbox4" class="styledCheckbox" type="checkbox" value="aircon" name="internal[]" onclick="setCheckboxDisplay(this)">
</span>

<span id="checkbox4Wrap" class="styledCheckboxWrap">
<input id="checkbox4" class="styledCheckbox" type="checkbox" value="aircon" name="internal[]" onclick="setCheckboxDisplay(this)">
</span>

如果我们取消勾选，这就是html

<span id="checkbox4Wrap" class="styledCheckboxWrap wrapChecked">
<input id="checkbox4" class="styledCheckbox" type="checkbox" value="aircon" name="internal[]" onclick="setCheckboxDisplay(this)">
</span>

<span id="checkbox4Wrap" class="styledCheckboxWrap">
<input id="checkbox4" class="styledCheckbox" type="checkbox" value="aircon" name="internal[]" onclick="setCheckboxDisplay(this)">
</span>

---

试着这样做：

if($("input[name='internal[]']:checked").length > 0)) {
  alert("At least 1 checkbox checked!");
}

---

试着这样做：

if($("input[name='internal[]']:checked").length > 0)) {
  alert("At least 1 checkbox checked!");
}

这行代码表示如果我有任何未选中的复选框，那么您看到的行为就是我所期望的。是否要计算复选框的数量并确保其>0

---

这行代码表示如果我有任何未选中的复选框，那么您看到的行为就是我所期望的。您不想计算复选框的数量并确保其大于0吗？

很难看到其中与计算复选框相关的一行。哇，这是一些非常粗糙的JS。很难看到其中与计数复选框相关的一行。这是一个非常粗糙的JS。可能>=1而不是>1，或者>0。以上两种情况都不允许此步骤进行验证。我们仍然收到消息：请在进入下一步之前，使用$div.find'input:checkbox:not:checked'.length>=1 | |@422完成所有字段。这是因为您粘贴的代码仍在检查未选中的框。寻找复选框；亚历克斯甚至为我提供了一个备用选择器，只需取出not部分。谢谢你的小提琴，但我不明白。我现在有了$div.find'input[name=internal[]]：选中。length>0 | |$div.find'input[name=external[]]：选中。length>0 | |仍然没有work@422我想您应该希望检查的计数=0，因为整个块都在寻找失败条件。我不知道外部的东西是关于什么的，我在HTML中看不到。底线是，逻辑缺陷已经被识别，您应该能够从这里找到它。可能>=1而不是>1，或者>0。以上两种情况都不允许此步骤进行验证。我们仍然收到消息：请在进入下一步之前，使用$div.find'input:checkbox:not:checked'.length>=1 | |@422完成所有字段。这是因为您粘贴的代码仍在检查未选中的框。寻找复选框；亚历克斯甚至为我提供了一个备用选择器，只需取出not部分。谢谢你的小提琴，但我不明白。我现在有了$div.find'input[name=internal[]]：选中。length>0 | |$div.find'input[name=external[]]：选中。length>0 | |仍然没有work@422我想您应该希望检查的计数=0，因为整个块都在寻找失败条件。我不知道外部的东西是关于什么的，我在HTML中看不到。底线是，逻辑缺陷已经被识别，您应该能够从这里找到它。