Question

我在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>是我唯一得到的。

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

Answer 1

问题是因为您正在访问元素集合的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

Answer 2

只需使用MongoDB Manual函数循环每个选中的输入，然后使用jQuery each函数附加项目。

$(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>

Answer 3

＆＃13;

$(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);
  });
});

＆＃13;

<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>

＆＃13;

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

Answer 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>

Answer 5

JavaScript的：

AccessController.doPrivileged ( some_malicious_code )

HTML：

AccessController.doPrivileged

Answer 6

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

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

在上面boxes是一个包含0个或更多项的jquery对象，但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>

Answer 7

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

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

这应该可以解决问题。您使用课程＆＃34;文本中心＆＃34;搜索所有项目和他们的直接输入孩子与检查选择器

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

如何在jquery中获取复选框的值

7 个答案: