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

- 日理万妓 2022-05-21 06:54 174阅读 0赞

**一：Html页面：**

</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;  
        \}