我有一个输入类型复选框如下：
<tr class=odd> <td align="center"> <input type="checkbox" id="psn" name="psn" value='20500561' /> </td> <td width="75"> 20500561 </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 </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未定义。 所以我无法获得已检查项目的值。
I have an input type checkbox as folows:
<tr class=odd> <td align="center"> <input type="checkbox" id="psn" name="psn" value='20500561' /> </td> <td width="75"> 20500561 </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 </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> .....I have a submit button, which when clicked calls this 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; }The above code works fine for rows greater than 1 but fails when row = 1. When there is only one row, document.searchCridResults.psn.length is undefined. So I am not able to get the value of the checked item.
最满意答案
这是一个有趣的情况，答案是：使用更多的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值是无效的。 同名是好的，但不是同一个id 。
This is one of those amusing situations where the answer is: Use more jQuery. :-)
If you want to consistently get an array-like thing (specifically: a jQuery instance), instead of
document.searchCridResults.psn
use
$(document.searchCridResults).find("[name=psn]")
The issue is that when there's only one, document.searchCridResults.psn is a reference to that one element. When there's more than one, the DOM creates an array-like thing (a NodeList) instead. jQuery, on the other hand, is always set-based (which is a big part of its power).
For instance, that loop creating the commaSepVals string can be converted to:
commaSepVals = $(document.searchCridResults).find("[name=psn]").filter(function() {
return this.checked;
}).map(function() {
return this.value;
}).get().join(",");
Live Example:
$("[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>
Side note: It's invalid to use the same id value on more than one element. The same name is fine, but not the same id.
更多推荐
发布评论