Html中 table list等表格 中 js 的 Checkbox全选 反选 单选 获取数据选中行 的写法

一：Html页面：

<table cellpadding="1" cellspacing="1">

<thead>

<tr>

<td class="li9">

<input type="checkbox" class="cbCheckAll" οnclick="checkAll()" id="all" name="cb" style="-webkit-appearance: checkbox; width: 16px; height: 16px;" />全选</td>

<td class="liConnectState">关联状态</td>

<td class="li1">学校ID</td>

<td class="li2">学校名称</td>

<td class="li3">所属地区</td>

<td class="li4">状态</td>

<td class="li5">添加时间</td>

</tr>

</thead>

<tbody></tbody>

</table>

二：js代码：

1：填充表格数据

$.each(list, function (i, val) {

$("<tr>").html(

'<td class="li9"><input type="checkbox" class="clCb" style="-webkit-appearance: checkbox; width:16px; height:16px;" >

'</td>').appendTo($('#list tbody'));

}):

2：js函数

//全选函数

function checkAll() {

var all = document.getElementById('all');//获取到点击全选的那个复选框的id

var one = document.getElementsByClassName('clCb');//获取到复选框的名称

//因为获得的是数组，所以要循环 为每一个checked赋值

for (var i = 0; i < one.length; i++) {

one[i].checked = all.checked; //直接赋值不就行了嘛

}

}

//获取勾选框选中行函数

function onGetCheckRows() {

var arrs = [];

var arrState = [];

var arrSchool = [];

var row = $(".clCb");

for (var i = 0; i < row.length; i++) {

var isChecked = row[i].checked;

if (isChecked) {

var conncetState = $("#list tr .liConnectState")[i + 1].innerText;

arrState.push(conncetState);

var schoolId = $("#list tr .li1")[i + 1].innerText;

arrSchool.push(schoolId);

}

}

arrs.push(arrState);

arrs.push(arrSchool);

return arrs;

}