javascript - JQuery 不适用于大小为 1 的数组

Question

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

<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 的行有效，但当行 = 1 时失败。 当只有一行时，document.searchCridResults.psn.length 未定义。所以我无法获得选中项的值。

Answer 1

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

如果你想始终如一地得到一个类似数组的东西(特别是:一个 jQuery 实例)，而不是

document.searchCridResults.psn

使用

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

问题是当只有一个时，document.searchCridResults.psn 是对该一个 元素的引用。当有多个节点时，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。