我在td id=td1内有一个带有复选框的表格。
我想从所有选中的data-ref获取array作为javascript checkboxes的属性。
类似的东西：
[{"data-ref": "test1"}, {"date-ref": "test2"}, ... ]
如果我能获得data-ref值，也就足够了，例如：
['test1', 'test2', ...]
已查看checkboxes我可以使用：
$('#tableUSNW tbody tr td :checked');
如何将所有属性data-ref作为数组？有没有比从each()编写jQuery函数更简单的方法？
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableUSNW">
<thead>
<th id="th1">Stolpec 1</th>
<th id="th2">Stolpec 2</th>
<th id="th3">Stolpec 3</th>
</thead>
<tbody>
<tr id="tr1" data-userkey="test1"><td id="td1" data-ref="test1"><input id="inputChk" type="checkbox"></td><td>test2</td><td id="td3">test3</td></tr>
<tr id="tr2" data-userkey="test2"><td id="td1" data-ref="test2"><input id="inputChk" type="checkbox"></td><td>test2</td><td id="td3">test3</td></tr>
<tr id="tr3" data-userkey="test3"><td id="td1" data-ref="test3"><input id="inputChk" type="checkbox"></td><td>test2</td><td id="td3">test3</td></tr>
<tr id="tr4" data-userkey="test4"><td id="td1" data-ref="test4"><input id="inputChk" type="checkbox"></td><td>test2</td><td id="td3">test3</td></tr>
<tr id="tr5" data-userkey="test5"><td id="td1" data-ref="test5"><input id="inputChk" type="checkbox"></td><td>test2</td><td id="td3">test3</td></tr>
<tbody>
</table>
答案 0 :(得分：1)
这是一种方法，使用jQuery＆＃39; s each
我在id时也略微清理了标记，因为它们应该是唯一的
var checked_datarefs = [];
$("#view").click(function() {
$("#tableUSNW input[type='checkbox']:checked").each(function(index) {
checked_datarefs.push($(this).closest('td').data('ref'));
});
console.log(checked_datarefs);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableUSNW">
<thead>
<th id="th1">Stolpec 1</th>
<th id="th2">Stolpec 2</th>
<th id="th3">Stolpec 3</th>
</thead>
<tbody>
<tr data-userkey="test1">
<td id="td11" data-ref="test1">
<input id="inputChk1" type="checkbox">
</td>
<td>test2</td>
<td id="td13">test3</td>
</tr>
<tr data-userkey="test2">
<td id="td21" data-ref="test2">
<input id="inputChk2" type="checkbox">
</td>
<td>test2</td>
<td id="td23">test3</td>
</tr>
<tr data-userkey="test3">
<td id="td31" data-ref="test3">
<input id="inputChk3" type="checkbox">
</td>
<td>test2</td>
<td id="td33">test3</td>
</tr>
<tr data-userkey="test4">
<td id="td41" data-ref="test4">
<input id="inputChk4" type="checkbox">
</td>
<td>test2</td>
<td id="td43">test3</td>
</tr>
<tr data-userkey="test5">
<td id="td51" data-ref="test5">
<input id="inputChk5" type="checkbox">
</td>
<td>test2</td>
<td id="td53">test3</td>
</tr>
<tbody>
</table>
<button id="view">Checked</button>
答案 1 :(得分：1)
您可以动态操作所有已选中复选框的data-ref属性列表，而不是使用任何循环。
使用Set对象的解决方案：
var dataRefs = new Set();
$("#tableUSNW input[type='checkbox']").on('change', function(){
var ref = $(this).parent().data('ref');
if ($(this).is(':checked')) {
dataRefs.add(ref);
} else {
dataRefs.delete(ref);
}
});
$('.showRefList').on('click', function(){
alert(Array.from(dataRefs));
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableUSNW">
<thead>
<th id="th1">Stolpec 1</th>
<th id="th2">Stolpec 2</th>
<th id="th3">Stolpec 3</th>
</thead>
<tbody>
<tr id="tr1" data-userkey="test1"><td id="td1" data-ref="test1"><input id="inputChk" type="checkbox"></td><td>test2</td><td id="td3">test3</td></tr>
<tr id="tr2" data-userkey="test2"><td id="td1" data-ref="test2"><input id="inputChk" type="checkbox"></td><td>test2</td><td id="td3">test3</td></tr>
<tr id="tr3" data-userkey="test3"><td id="td1" data-ref="test3"><input id="inputChk" type="checkbox"></td><td>test2</td><td id="td3">test3</td></tr>
<tr id="tr4" data-userkey="test4"><td id="td1" data-ref="test4"><input id="inputChk" type="checkbox"></td><td>test2</td><td id="td3">test3</td></tr>
<tr id="tr5" data-userkey="test5"><td id="td1" data-ref="test5"><input id="inputChk" type="checkbox"></td><td>test2</td><td id="td3">test3</td></tr>
<tbody>
</table>
<button class='showRefList'>Show data-ref list</button>
当然，您可以轻松地将data-ref个属性（Array.from(dataRefs)）数组存储在预定义变量中。
答案 2 :(得分：1)
我忘记添加从数组data-ref中删除refArray值：
else { refArray.pop.(ref); }
在OP请求时，以下代码段不使用.each()。该函数的目的是收集作为复选复选框的父项的每个data-ref的属性<td>的值，然后将结果返回到数组中。
虽然与问题无关，但值得一提的是使用id属性，我们必须始终确保每一个在页面上都是唯一的。因此，在代码段中，重复的ID已得到纠正。
详细信息在代码段中注释：
/* Create an empty array */
var refArray = [];
/* Any change event on any checkbox
| will trigger the function
*/
$(':checkbox').on('change', function() {
/* $(this) refers to the function owner, in
| this case it is the specific checked checkbox
*/
/* The checked checkbox's parent's data-ref */
var ref = $(this).parent('td').data('ref');
if ($(this).is(':checked')) {
/* Add data-ref value to refArray */
refArray.push(ref);
} else {
/* Remove data-ref value from refArray */
refArray.pop(ref);
}
console.log(refArray);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableUSNW">
<thead>
<th id="th1">Stolpec 1</th>
<th id="th2">Stolpec 2</th>
<th id="th3">Stolpec 3</th>
</thead>
<tbody>
<tr id="trA" data-userkey="test1">
<td id="tdA1" data-ref="test1">
<input id="chx1" type="checkbox">
</td>
<td>test2</td>
<td id="tdA3">test3</td>
</tr>
<tr id="trB" data-userkey="test2">
<td id="tdB1" data-ref="test2">
<input id="chx2" type="checkbox">
</td>
<td>test2</td>
<td id="tdB3">test3</td>
</tr>
<tr id="trC" data-userkey="test3">
<td id="tdC1" data-ref="test3">
<input id="chx3" type="checkbox">
</td>
<td>test2</td>
<td id="tdC3">test3</td>
</tr>
<tr id="trD" data-userkey="test4">
<td id="tdD1" data-ref="test4">
<input id="chx4" type="checkbox">
</td>
<td>test2</td>
<td id="tdD3">test3</td>
</tr>
<tr id="trE" data-userkey="test5">
<td id="tdE1" data-ref="test5">
<input id="chx5" type="checkbox">
</td>
<td>test2</td>
<td id="tdE3">test3</td>
</tr>
</tbody>
</table>