jQuery中的表格全选与不选

jQuery中的表格全选与不选_第1张图片
jQuery中的表格全选与不选_第2张图片
html代码


<html>
<head>
	<title>jquerytitle>
	<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>分类IDth>
					<th>分类名称th>
					<th>分类商品th>
					<th>分类描述th>
				tr>
			thead>
			<tbody>
				<tr>
					<td>
						<input type="checkbox" id="checkAll" name="checkone" />
					td>
					<td>1td>
					<td>手机数码td>
					<td>华为、小米、尼康td>
					<td>实用td>
				tr>
				<tr>
					<td>
						<input type="checkbox" id="checkAll" name="checkone"/>
					td>
					<td>2td>
					<td>书籍td>
					<td>java编程实战td>
					<td>实用td>
				tr>
				<tr>
					<td>
						<input type="checkbox" id="checkAll" name="checkone"/>
					td>
					<td>3td>
					<td>电脑办公td>
					<td>联想、小米td>
					<td>实用td>
				tr>
				<tr>
					<td>
						<input type="checkbox" id="checkAll" name="checkone"/>
					td>
					<td>4td>
					<td>零食td>
					<td>辣条、麻花、黄瓜td>
					<td>实用td>
				tr>
				<tr>
					<td>
						<input type="checkbox" id="checkAll" name="checkone"/>
					td>
					<td>5td>
					<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>

你可能感兴趣的:(#,Ajax,and,JQuery)