【问题标题】:Javascript does not recognize HTML arraysJavascript 无法识别 HTML 数组
【发布时间】:2014-06-15 15:05:21
【问题描述】:

如何将这种 HTML 输入传递给 JavaScript 以便它识别这些数组值?

<input type="checkbox" id="collection[]" value="0">
<input type="checkbox" id="collection[]" value="1">
<input type="checkbox" id="collection[]" value="2">]

我唯一的想法(从来没有以这种方式玩过 js,tbh)是通过以下方式实现它:

$("#collection").val();

但我得到 undefined 错误。我不知道如何让 javascript 识别变量 collection 是一个数组,并且必须这样传递。

提前致谢!

【问题讨论】:

  • 你想做什么?决定选中哪些复选框?
  • 抱歉,没有将名称更改为 id。也不行。 @taylorcressy:我正在尝试将选定复选框的值传递给 json,然后通过 jQuery 传递给 php 文件,以便只处理选定的复选框。但我需要 javascript 来识别要通过哪些复选框...
  • 你不能有重复的ID,把它改成名字
  • 谢谢你,@JustcallmeDrago

标签: javascript jquery json


【解决方案1】:

请记住,ID 在您的文档中必须是唯一的。所以按“名称”而不是按 ID 设置。

你可以使用

$('#someid').is(":checked");

用于单独检查每个复选框,或使用 jQuery 选择器循环遍历它们

循环遍历它们集

<input type="checkbox" name="checkboxes" value="0">
<input type="checkbox" name="checkboxes" value="1">
<input type="checkbox" name="checkboxes" value="2">

然后用 jQuery,

$('input[name=checkboxes]:checked').each(function(i, e) {
        e.val();   //The value of the checkbox that is selected
});

【讨论】:

  • 谢谢。我会记住的。
【解决方案2】:

您不能有重复的 ID。虽然在这种情况下重复 ID 会为您提供所需的输出,但将它们用于多个元素是无效的。

<input type="checkbox" name="collection[]" value="0">
<input type="checkbox" name="collection[]" value="1">
<input type="checkbox" name="collection[]" value="2">

您可以通过多种方式访问​​基于数组的元素。

jQuery .map():替代方案是 .each()

Demo

$("[name='collection[]']").map(function(){return $(this).val();}).get()

Working Demo 用于检查检查的输入。 要获得选中的复选框,

$('input').change(function () {
    console.log($("[name='collection[]']:checked").map(function () {
        return $(this).val();
    }).get());
});

【讨论】:

  • 感谢您的回复。这有帮助。
【解决方案3】:
$("#collection")

意思是“在页面上给我找一个id等于集合的元素”,当然它什么也找不到。您可以使用 .each 函数,也可以使用复选框属性。例如;

var myCheckBoxArray = []

$("input[type='checkbox']").each(function(i,elm){
    myCheckBoxArray.push(elm);
});

【讨论】:

  • 他只想要被选中的复选框
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-07-10
  • 2017-06-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多