JQuery 不适用于大小为 1 的数组答案

【问题标题】：JQuery doesnt work for array of size 1JQuery 不适用于大小为 1 的数组
【发布时间】：2015-04-28 15:32:27
【问题描述】：

我有一个输入类型复选框，如下所示：

<tr class=odd>
<td align="center"> <input type="checkbox" id="psn" name="psn" value='20500561'  /> </td>                                           
<td width="75"> 20500561&nbsp; </td>
<td> ABCDEFG CO <span style="color:maroon;font-size:8pt;"></span> </td>
<td> 715 LOCAL STREET </td>
<td> ST.LOUIS </td>
<td> MO </td>
</tr>
<tr class=even >                       
<td align="center"> <input type="checkbox" id="psn" name="psn" value='26736' /> </td> 
<td width="75"> 26736&nbsp; </td>
<td> ABC <span style="color:maroon;font-size:8pt;"></span> </td>
<td> 1716 LOCUST ST </td>
<td> DES MOINES </td>
<td> IA </td>
</tr>   .....

我有一个提交按钮，点击它会调用这个 JQuery，

$('#submitButton').click(function () {

    var mySelect = checkSelected();

    if (mySelect == undefined) {
        alert("You must select an item to continue.");
        return false;
    }


    var commaSepVals = '';  
    for(var index=0;index < document.searchCridResults.psn.length; index++ ){
        if(document.searchCridResults.psn[index].checked){
            alert("checked crid");
            commaSepVals += document.searchCridResults.psn[index].value+',';
            alert("commaSepVals ))) "+commaSepVals);
        }
    }
    commaSepVals = commaSepVals.substr(0,commaSepVals.length -1);   
    var returnValsFromQ = '<c:out value="${sessionScope.returnVals}" />';   
    var returnArray = returnValsFromQ .split(',');

///////////////
}

function checkSelected() {  
 var selected = $('input[name=psn]:checked').val();     
 return selected;
}

上面的代码适用于大于 1 的行，但当 row = 1 时失败。只有一行时，document.searchCridResults.psn.length 未定义。所以我无法获取选中项的值。

【问题讨论】：

这里（可能）不是问题，但是对多个元素重复使用相同的“id”值是无效的。
发生这种情况是因为 document.searchCridResults.psn 返回一个元素
@codehx 在我前面，我什至无法弄清楚 document.searchCridResults.psn 的设置位置
@Ted 浏览器将表单作为document 属性提供，表单字段是这些属性的属性。
你在哪里看到Java这里！！！为什么要使用Java 标签？

标签： javascript jquery

【解决方案1】：

这是其中一种有趣的情况，答案是：使用更多的 jQuery。 :-)

如果你想始终如一地获得类似数组的东西（特别是：一个 jQuery 实例），而不是

document.searchCridResults.psn

使用

$(document.searchCridResults).find("[name=psn]")

问题在于，当只有一个时，document.searchCridResults.psn 是对那个 one 元素的引用。当有多个时，DOM 会创建一个类似数组的东西（NodeList）。另一方面，jQuery 始终是基于集合的（这是其强大功能的重要组成部分）。

例如，创建commaSepVals 字符串的循环可以转换为：

commaSepVals = $(document.searchCridResults).find("[name=psn]").filter(function() {
    return this.checked;
}).map(function() {
    return this.value;
}).get().join(",");

实例：

$("[name=psn]").on("click", function() {
  var commaSepVals = $("#searchCridResults").find("[name=psn]").filter(function() {
    return this.checked;
  }).map(function() {
    return this.value;
  }).get().join(",");
  $("<p>Selected: " + commaSepVals + "</p>").appendTo(document.body);
});

<p>Click checkboxes below</p>
<table id="searchCridResults">
  <tbody>
    <tr>
      <td>
        <label>
          <input type="checkbox" name="psn" value='first' />first</label>
      </td>
      <td>
        <label>
          <input type="checkbox" name="psn" value='second' />second</label>
      </td>
      <td>
        <label>
          <input type="checkbox" name="psn" value='third' />third</label>
      </td>
      <td>
        <label>
          <input type="checkbox" name="psn" value='fourth' />fourth</label>
      </td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

附注：在多个元素上使用相同的id 值是无效的。相同的 name 可以，但不能相同的 id。

【讨论】：