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

Question

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

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

我们有一个阶梯式的表格，你知道:完成第 1 步，继续第 2 步，等等。在第 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>

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

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

Answer 1

$(div).find('input:checkbox:not(:checked)').length > 0

这一行表示“如果我有任何未选中的复选框”，因此您所看到的行为正是我所期望的。您不想计算选中框的数量并确保其> 0吗？