在如下表格中:
当都选其中某几项时,如果需要给服务端ajax传递对应项的id值,该如何做呢?
思路应该是这样的:
①获取被勾选项(即checked的checkbox所在行)
②将id存在checkbox所在input的自定义属性中,如data-id
中
③创建空数组,遍历被选中的checkbox所在行,获取对应的data-id
值,存入数组中
④将存入的数组转化为字符串,并用逗号隔开(join(','))
html代码如下:
<table id="list-table">
<thead>
<tr>
<th><div></div></th>
<th><div>ID</div></th>
<th><div>数据集</div></th>
<th><div>数据集简介</div></th>
<th><div>倒入时间</div></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="dataset-id" value="1" data-id="1"></td>
<td>1</td>
<td>GWC9B2015</td>
<td>2015年平均值数据</td>
<td>2017-05-23T15:43:58.020</td>
</tr>
<tr>
<td><input type="checkbox" name="dataset-id" value="2" data-id="2"></td>
<td>2</td>
<td>GWC9A2015</td>
<td>2015年平均值数据2</td>
<td>2017-05-24T14:40:33.441</td>
</tr>
<tr>
<td><input type="checkbox" name="dataset-id" value="8" data-id="8"></td>
<td>8</td>
<td>cma_1km_stat</td>
<td>2015年1公里风数据</td>
<td>2017-05-24T16:12:12.620</td>
</tr>
</tbody>
</table>
jQuery代码:
var $ids = []; //定义一个空数组
var $chkBoxes = $('#idc-list-table').find('input:checked'); //找到被选中的checkbox集
if ($chkBoxes.length == 0) { //如果不勾选弹出警告框
alert('请至少选择一个数据集');
return false;
}
//遍历被选中的checkbox集
$($chkBoxes).each(function () {
$ids.push( $(this).attr('data-id') ); //找到对应checkbox中data-id属性值,然后push给空数组$ids
});
var $ids_str = $ids.join(','); //将数组转化为用逗号隔开的字符串
//( 还有一种写法:var $ids_str += ','+($ids + '') ) ,Number型加上空字符串''可以将Number转化为字符串
console.log($ids_str); // =>1,2