jquery如何获取选中框的值答案

【问题标题】：How to get the value of the checked boxes in jqueryjquery如何获取选中框的值
【发布时间】：2016-06-22 08:33:45
【问题描述】：

我在 html 中有以下代码，它使用复选框对齐作为一行

<tr class="reg_name">
  <th class="custom-th">Reg. Name</th>
  <td class="text-center"><input type="checkbox" name="reg_name[]" value="Y:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name[]" value="N:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name[]" value="B:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name[]" value="I:1"></td>
</tr>

有一个按钮

<button type="button" class="purchase__save btn btn-default pull-right">Save</button>

还有这个js代码，

$(document).ready(function() {
  $('.purchase__save').click(function() {
    var box_array = [];
    var boxes = $('.reg_name input[name="reg_name[]"]:checked');
    for (var i = 0; i < boxes.length; i++) {
      box_array[i] = boxes.val();
    }
    console.log(box_array);
  });
});

将尝试获取复选框的值。

问题，如果尝试同时选中两个复选框，则值来自这个<td class="text-center"><input type="checkbox" name="reg_name[0]" value="Y:1"></td>是我唯一得到的。

如果其他复选框被选中，如何获取它们的值？

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

$(document).ready(function() {
  $('.purchase__save').click(function() {
    var box_array = [];
    var boxes = $('input:checkbox:checked');
    $.each(boxes, function(i,v) {
      box_array[i] = $(this).val();


    })

    console.log(box_array);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="reg_name">
    <td class="text-center">
      <input type="checkbox" name="reg_name" value="Y:1">
    </td>
    <td class="text-center">
      <input type="checkbox" name="reg_name" value="N:1">
    </td>
    <td class="text-center">
      <input type="checkbox" name="reg_name" value="B:1">
    </td>
    <td class="text-center">
      <input type="checkbox" name="reg_name" value="I:1">
    </td>
  </tr>
</table>

<button type="button" class="purchase__save btn btn-default pull-right">Save</button>

使用$(this) 获取当前复选框值

【讨论】：

@Fil glafd 帮助匹配快乐的编码:)

【解决方案2】：

问题是因为您正在访问元素集合的val()，这意味着它只会检索集合中第一个元素的值。

您可以改用map() 来构建数组来改进此代码：

$('.purchase__save').click(function() {
    var box_array = $('.reg_name input[name="reg_name[]"]:checked').map(function() {
        return this.value;
    }).get();

    // use the array as required here...
});

Working example

【讨论】：

没问题，很乐意提供帮助。

【解决方案3】：

只需使用jQuery each 函数循环每个检查的输入，然后使用JavaScript push 函数附加该项目。

$(function() {
  $(".purchase__save").click(function() {
    var box_array = [];
    $(".reg_name input[name='reg_name[]']:checked").each(function(i, v) {
      box_array.push($(v).val());
    });
    console.log(box_array);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="reg_name">
    <th class="custom-th">Reg. Name</th>
    <td class="text-center">
      <input type="checkbox" name="reg_name[]" value="Y:1">
    </td>
    <td class="text-center">
      <input type="checkbox" name="reg_name[]" value="N:1">
    </td>
    <td class="text-center">
      <input type="checkbox" name="reg_name[]" value="B:1">
    </td>
    <td class="text-center">
      <input type="checkbox" name="reg_name[]" value="I:1">
    </td>
  </tr>
</table>
<button type="button" class="purchase__save btn btn-default pull-right">Save</button>

【讨论】：

你在 jquery 中编码的方式很漂亮，很好，而且很有帮助

【解决方案4】：

工作示例

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
$(document).ready(function() {
  $('.purchase__save').click(function() {
    var box_array = [];
    $("input:checkbox[name=reg_name]:checked").each(function(){
    box_array.push($(this).val());
    });
    console.log(box_array);
  });
});
</script>
</head>
<body>
<tr class="reg_name">
  <th class="custom-th">Reg. Name</th>
  <td class="text-center"><input type="checkbox" name="reg_name" value="Y:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name" value="N:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name" value="B:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name" value="I:1"></td>
</tr>
<button type="button" class="purchase__save btn btn-default pull-right">Save</button>
</body>
</html>

【讨论】：

【解决方案5】：

JavaScript：

$(document).ready(function() {
  $('.purchase__save').click(function() {
    var box_array = [];
    var i = 0;
    var boxes = $('.checkedIn:checked');
    console.log(boxes);
    $(boxes).each(function(){
        box_array[i] = this.value;
      i++;
    });
    console.log(box_array);
  });
});

HTML：

<tr class="reg_name">
  <th class="custom-th">Reg. Name</th>
  <td class="text-center"><input type="checkbox" class="checkedIn" name="reg_name[]" value="Y:1"></td>
  <td class="text-center"><input type="checkbox" class="checkedIn" name="reg_name[]" value="N:1"></td>
  <td class="text-center"><input type="checkbox" class="checkedIn" name="reg_name[]" value="B:1"></td>
  <td class="text-center"><input type="checkbox" class="checkedIn" name="reg_name[]" value="I:1"></td>
</tr>
<button type="button" class="purchase__save btn btn-default pull-right">Save</button>

【讨论】：

【解决方案6】：

您正在循环您的 boxes 结果，但只读取第一个结果。

for (var i = 0; i < boxes.length; i++) {
  box_array[i] = boxes.val();
}

上面boxes是一个jquery对象，有0个或多个项目，但boxes.val()只会读取第一个的值。

$('.purchase__save').click(function() {
    var box_array = $('.reg_name input[name="reg_name[]"]:checked').map(function(){
      return $(this).val();
    }).get();
    
    console.log(box_array);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="reg_name">
  <th class="custom-th">Reg. Name</th>
  <td class="text-center"><input type="checkbox" name="reg_name[]" value="Y:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name[]" value="N:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name[]" value="B:1"></td>
  <td class="text-center"><input type="checkbox" name="reg_name[]" value="I:1"></td>
</tr>
  </table>

<button type="button" class="purchase__save btn btn-default pull-right">Save</button>

【讨论】：

【解决方案7】：

因为您没有为您的输入指定 ID 或名称，您需要从不同的方式访问它们。

$.('.text-center > input:checked')

这应该可以解决问题。您使用“text-center”类搜索所有项目，并使用选中的选择器直接输入子项

EDIT这将返回 JQuery 对象并注意 Jamiec 的回答！

【讨论】：