Question

首先，我要感谢你们所有人迄今为止所付出的巨大努力和帮助。现在回答问题。

我有五个复选框，并且需要检查五个中的至少一个以根据需要进行验证。

我已经看到了一些如何做到这一点的方法，但我似乎无法使它们中的任何一个工作。

现在我正在使用validate插件和元数据插件。如何检查是否有一个类required_group的复选框，其余的不再需要？我还给了所有复选框class="required"

一如既往地谢谢！

编辑：我对错误地填写问题表示歉意。我会使用单选按钮或选择，因为它很容易，但要求我使用复选框。再次感谢您的时间，并对此感到抱歉。

最终编辑 所以我就是这样做的，以防万一其他人需要。

    jQuery.validator.addMethod('ClassAppliedToCheckBoxes', function(value, element, checked) {
            var $module = $(element).parents('.YourContainerClass');
            return $module.find('input:checked').length;
            });

            jQuery.validator.addClassRules("ClassAppliedToCheckBoxes", {
                    'ClassAppliedToCheckBoxes' : true
            });

            jQuery.validator.messages.required_group = 'Please check at least one of these fields.';

Answer 1

请不要那样做。从可用性的角度来看，这是一种可怕的做法。一旦用户看到复选框，他们就会认为会有多个选择。对于单一选择，我们有radioboxes。给他们所有人都这个名字，他们将是独家的。

示例：

I am a:<br/>
<input type="radio" id="age_old" name="age" value="old">
  <label for="age_old">Oldtimer</label><br/>
<input type="radio" id="age_mid" name="age" value="mid" checked>
  <label for="age_mid">Middle-aged</label><br/>
<input type="radio" id="age_young" name="age" value="young">
  <label for="age_young">Youth</label><br/>

奖励：不需要JavaScript - 所有纯HTML。如果您需要不选择任何内容的功能，只需添加另一个空值的单选框：

<input type="radio" id="age_no" name="age" value="">
  <label for="age_no">...not telling!</label><br/>

更新：有人指出，这不是问题所在。如果是这种情况，并且需要另一个读数（“至少需要设置一个复选框”），请忽略它。

Answer 2

我同意Amadan的说法，复选框不是要走的路。复选框可供多种选择。如果您希望表单可以访问，请将其设为SELECT：

<label for="myselect">Choose type of house</label>

<select name="myselect" id="myselect" class="required">
  <option value="1">Option 1 Text</option>
  <option value="2">Option 2 Text</option>
  <option value="3">Option 3 Text</option>
  <option value="4">Option 4 Text</option>
  <option value="5">Option 5 Text</option>
</select>

这将使您的表单对于使用屏幕阅读器导航它的人更加友好。 Radio buttons causes some issues用于标记表单的用户。

Answer 3

尝试这样的事情：

var $invalid = $(":checkbox.required").filter(function() {
    var n = this.name;
    return $(":checkbox[name='" + n "']:checked").length == 0;
});

从那里，你可以做很多事情。要暂停表单提交，请检查长度是否大于零（如果是，则存在一些无效的长度）。要突出显示无效的：

$invalid.parent().css({ color: '#f00' });

请注意，这不是一个非常有效的算法：它会对复选框执行多次检查。如果这是一个瓶颈，那么就有一个你可以改进的地方，但无论如何它都是一个很好的起点。

jQuery，我如何指示组中至少需要一个复选框

3 个答案: