jquery实现表格全选反选案例

来源：互联网发布：刺客信条大革命1.6优化编辑：程序博客网时间：2024/05/17 23:46

<!DOCTYPE html>

<html>

<style>

.wrap{margin: 20px;width: 300px;}

table{border: 1px solid silver;border-collapse: collapse;border-spacing: 0;}

td,th{padding: 10px;border: 1px solid #D0D0D0;color: #404060;font-size: 14px;}

th{background-color: #26A1AF;color: #fff;font-weight: bold;}

</style>

$(function() {

// :checkbox表示获取到表格body的所有checkbox

var $tbCheckboxes = $("#j_tb").find(":checkbox");

// 全选和全不选

$("#j_cbAll").click(function () {

// 使用prop这个方法来判断这个checkbox有没有被选中

var isChecked = $(this).prop("checked");

//alert(isChecked);

if(isChecked) {

// 让表格body里面的所有checkbox选中

// :checkbox 这个选择器会帮我们选择到所有的checkbox

$tbCheckboxes.prop("checked", true);

} else {

// 让表格body里面的所有checkbox不选中

$tbCheckboxes.prop("checked", false);

}

});

// 单选控制全选checkbox选中或者不选中

$tbCheckboxes.click(function () {

// 获取到所有被选中的checkbox的个数跟所有的checkbox个数对比

// :checked表示：获取到body中所有被选中的checkbox

// length属性表示获取到元素的长度

var checkedLength = $("#j_tb").find(":checked").length;

// 获取到所有的checkbox的长度

var allCheckboxLength = $tbCheckboxes.length;

//alert(checkedLength);

// 如果相等，就让全选按钮选中

if(checkedLength == allCheckboxLength) {

$("#j_cbAll").prop("checked", true);

} else {

// 否则，让全选按钮不选中

$("#j_cbAll").prop("checked", false);

}

});

</script>

</head>

<body>

<table>

<thead>

<tr>

<th>

</th>

</tr>

</thead>

<tr>

<td>

</td>

<td>JavaScript</td>

<td>课工场前端学院</td>

</tr>

<tr>

<td>

</td>

<td>课工场前端学院</td>

</tr>

<tr>

<td>

</td>

<td>课工场前端学院</td>

</tr>

<tr>

<td>

</td>

<td>jQuery</td>

<td>课工场前端学院</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

WEB前端学习交流群21 598399936

阅读全文

0 0