如何检查在一组具有不同名称值的复选框中是否检查了至少一个复选框?

时间:2021-02-03 10:04:10

I have a problem that I have been seeking an answer for for a while now and can't get it to work.

我有一个问题,我一直在寻找一个答案,但现在它不能工作。

I am searching for a way to check if atleast one checkbox in a group of checkboxes is checked. What makes it so difficult for me is that every one of these inputs have different name values. I found answers only for jQuery validation plugin etc. Here is my html:

我正在寻找一种方法来检查一组复选框中是否至少有一个复选框被选中。让我如此困难的是每一个输入都有不同的名字值。我只找到了jQuery验证插件等的答案。

<tr class="formField-checkbox formFieldRequired">
  <td class="formLabelHolder"><label for="field129">Group of checkboxes</label></td>
  <td class="formFieldHolder">
    <input type="checkbox" name="field129[0]" class="formCheckbox required" value="Something1"> 
    <label><span class="formCheckboxLabel">Something1</span></label>
    <input type="checkbox" name="field129[1]" class="formCheckbox required" value="Something2"> 
    <label><span class="formCheckboxLabel">Something2</span></label>
    <input type="checkbox" name="field129[2]" class="formCheckbox required" value="Something3"> 
    <label><span class="formCheckboxLabel">Something3</span></label>
  </td>
</tr>

Here is my jQuery that I have now:

这是我现在的jQuery:

// Validate all checkboxes
var named = [];
var $requiredCheck = $(this).find('input[type="checkbox"].required');

$($requiredCheck,$formId).each(function() {
  // Creates an array with the names of all the different checkbox group.
  named[$(this).attr('name')] = true;
});

// Goes through all the names and make sure there's at least one checked.
for (name in named) {
  var $checkboxes = $("input[name='" + name + "']");
  if ($checkboxes.filter(':checked').length == 0) {
    $checkboxes.closest('.formFieldHolder').addClass('error').append('<span   class="error">Required!</span>');
  } 
}

This obviously doesn't work perfectly at the moment because the checkboxes have different name values. Now the append prints out as many error messages as there are checkboxes. For example if there are five checkboxes and one is checked, it still gives the error message four times. I have tried to solve this on my own for so long but simply can't get it right. I can't change the name value of these checkboxes or quite simply do anything to the html. One way I figured this could be done is to remove the last [0], [1] and [2] parts in the names but I didn't find a way how I could get it to work.

显然,这在目前还不能很好地工作,因为复选框具有不同的名称值。现在,append将输出与复选框一样多的错误消息。例如,如果有五个复选框,其中一个复选框被选中,它仍然会给出4次错误消息。我已经试着自己解决这个问题很久了,但就是做不好。我不能更改这些复选框的名称值,也不能对html做任何修改。一种方法是去掉名字中最后的[0][1]和[2]部分,但我找不到方法让它工作。

I think simple jQuery validation methods will fail since there could be more checkbox groups than just one in a single form. The next group of checkboxes would have name value of name="field130[0]", name="field130[1]" and name="field130[2]". I think you get my point, hopefully.

我认为简单的jQuery验证方法将会失败,因为在一个表单中可能会有更多的复选框组。下一组复选框的名称值为name="field130[0]", name="field130[1]", name="field130[2]"。希望你们能理解我的意思。

Any help would be much appreciated.

非常感谢您的帮助。

EDIT:

编辑:

Added the description that there could be more than one group of checkboxes in one form

添加了这样的描述:一个表单中可能有多个复选框组。

1 个解决方案

#1


10  

You're making this way too complicated :)

你把事情弄得太复杂了

if ($('.required:checked').length > 0) {  // the "> 0" part is unnecessary, actually
    [do something]
}

See the first example on the official jQuery API page for :checked.

参见官方jQuery API页面上的第一个示例:勾选。

In response to your comment

回应你的评论

If you have multiple forms on the page, you can specify the form as a container:

如果页面上有多个表单,可以将表单指定为容器:

if ($('#form1_id').find('.required:checked').length) {...

To test multiple forms

测试多种形式

Give each form the class testable_form.

给每个表单一个testable_form类。

$('.testable_form').each(function() {
    if ($(this).find('.required:checked').length) {
        [do something - set a flag, add a class...]
    }
});

#1


10  

You're making this way too complicated :)

你把事情弄得太复杂了

if ($('.required:checked').length > 0) {  // the "> 0" part is unnecessary, actually
    [do something]
}

See the first example on the official jQuery API page for :checked.

参见官方jQuery API页面上的第一个示例:勾选。

In response to your comment

回应你的评论

If you have multiple forms on the page, you can specify the form as a container:

如果页面上有多个表单,可以将表单指定为容器:

if ($('#form1_id').find('.required:checked').length) {...

To test multiple forms

测试多种形式

Give each form the class testable_form.

给每个表单一个testable_form类。

$('.testable_form').each(function() {
    if ($(this).find('.required:checked').length) {
        [do something - set a flag, add a class...]
    }
});