html代码
<!DOCTYPE html>
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
<form>
<table class="table" id="tab">
<thead>
<tr>
<th>
<input type="checkbox" onclick="checkAll()" id="checkAll" />全选
</th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类商品</th>
<th>分类描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="checkAll" name="checkone" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为、小米、尼康</td>
<td>实用</td>
</tr>
<tr>
<td>
<input type="checkbox" id="checkAll" name="checkone"/>
</td>
<td>2</td>
<td>书籍</td>
<td>java编程实战</td>
<td>实用</td>
</tr>
<tr>
<td>
<input type="checkbox" id="checkAll" name="checkone"/>
</td>
<td>3</td>
<td>电脑办公</td>
<td>联想、小米</td>
<td>实用</td>
</tr>
<tr>
<td>
<input type="checkbox" id="checkAll" name="checkone"/>
</td>
<td>4</td>
<td>零食</td>
<td>辣条、麻花、黄瓜</td>
<td>实用</td>
</tr>
<tr>
<td>
<input type="checkbox" id="checkAll" name="checkone"/>
</td>
<td>5</td>
<td>床上用品</td>
<td>床单、被套、四件套</td>
<td>实用</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
纯JavaScript的方式
<script>
function checkAll(){
//获得当前第一个checkbox的状态
var check1 = document.getElementById("check1");
//得到当前checked状态
var checked = check1.checked;
var checks = document.getElementsByName("checkone");
//alert(checks.length);
for(var i = 0; i < checks.length; i++){
//修改每一个checkbox的状态
var checkone = checks[i];
checkone.checked = checked;
}
}
</script>
jQuery的方式
<script>
$(function () {
//绑定点击事件
//this代表的是当前函数的所有者
$("#checkAll").click(function() {
//获取当前的选中状态
//alert(this.checked);
//获取所有分类项的checkbox
//选择器（属性名称='属性值'）
$("input[type='checkbox']:gt(0)").prop("checked",this.checked);
});
});
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
