Question

背景

我有一个复选框表格，按名称分组，每个复选框都包含一个时间值。 HTML的一个例子：

<td><input type="checkbox" name="tuesday[]" value="10am"></td>
<td><input type="checkbox" name="tuesday[]" value="11am"></td>
<td><input type="checkbox" name="tuesday[]" value="12pm"></td>
<td><input type="checkbox" name="tuesday[]" value="1pm"></td>
<td><input type="checkbox" name="tuesday[]" value="2pm"></td>
<td><input type="checkbox" name="tuesday[]" value="3pm"></td>
<td><input type="checkbox" name="tuesday[]" value="4pm"></td>
<td><input type="checkbox" name="tuesday[]" value="5pm"></td>
<td><input type="checkbox" name="tuesday[]" value="6pm"></td>
<td><input type="checkbox" name="tuesday[]" value="7pm"></td>

提交表单时，值为POST我希望它们如何;所有检查的时间都在tuesday[]数组中。

问题

我想用jQuery进行一些客户端验证。我想检查是否至少选中了一个复选框。

我尝试将其存储到var中：

var availTuesday  = $("input:checkbox[name='tuesday']:checked");

但是当我这样做和console.log(availTuesday);时，没有显示任何内容（无论是否检查某些内容）。我也试过console.log(availTuesday.serialize());

问题：

如何检索tuesday[]复选框组以及其他日期（wednesday[]，thursday[]等）的用户选中值？

谢谢。

Answer 1

选择器不正确，请将其更改为：

var $tuesday = $("input[type=checkbox][name='tuesday[]']:checked");

要获取值，可以使用返回数组的.map()方法：

if ($tuesday.length) {
   // Getting values of the checked checkboxes
   var values = $tuesday.map(function(){
        return this.value;
   }).get();
   // ...
} else {
    // There is no checked `day[]` checkbox
}

如果您有其他类似的复选框，则可以使用数组：

var days = ['days', 'in', 'a', 'week'],
    values = {},
    errors = [],
    $checkboxes = $("input[type=checkbox]");

$.each(days, function(_, day) {
  var $set = $checkboxes.filter('[name="'+day+'[]"]:checked');
  if ($set.length) {
      values[day] = $set.map(function() {
          return this.value;
      }).get();
  } else {
      // There is no checked `day[]` checkbox
      errors.push(day);
  }
});

if (errors.length) {
   // console.log('Please check at least one hour in ' + errors.join(', ') + ' days ...');
} else {
  // console.log(values);
}

Answer 2

你可以尝试

var availTuesday = [];
    $('input[type=checkbox][name="tuesday[]"]:checked').each(function() {
       availTuesday.push($(this).val()); 
    });

JSFiddle

Answer 3

如果您想要实际的value

var values = $("input[type=checkbox][name='tuesday[]']:checked").map(function() {
    return this.value;
}).get();

Answer 4

如果您真正关注的是，如果选择了任何方框，您可以执行以下操作：

if($('input[type="checkbox"][name="tuesday[]"]:checked').length) {
    ...
} else {
    ...
}

length值是jQuery对象（DOM对象的超集）的属性，它指定与选择器匹配的节点数。在这种情况下，如果检查长度并且值为0，则不存在名称为:checked的{{1}}复选框（即用户未选中任何框，因此显示验证消息）。这是快速而肮脏的验证。如果您想要检索这些值，那么其他答案可能会更好。

Answer 5

您需要修改选择器以匹配名称，正如其他人所提到的那样如果你只是想测试一个被检查，你可以直接使用布尔值，如下所示：

var availTuesday  = $("input:checkbox[name='tuesday[]']:checked").length > 0;

jQuery将选中的复选框存储到数组中

5 个答案: