jQuery实现复选框全选和全不选

第一种方法:



<html>

	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			table {
				margin: auto;
			}
		style>
		<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8">script>
		
		<script type="text/javascript">
			//让后面的复选框和第一个一致即可
			function c(obj) {
				$(".cb").prop("checked", obj.checked)
			}

			//当下面所有的复选框全选之后自动选择最上面的那个复选框
			$(function() {
				$("table td :checkbox").click(function() {
					var c = $("table td :checkbox").length
					var len = $("table td :checked").length;
					$("table th :checkbox").prop("checked", c == len);
				}) 
			})
		script>
	head>

	<body>
		<table id="table" border="1" cellspacing="" cellpadding="" width="40%">
			<tr id="trr">
				<td>
					<button>删除button>
				td>

			tr>
			<tr id="tr1">
				<th class="thclass"><input type="checkbox" onclick="c(this)" id="cb1" />th>
				<th>分类IDth>
				<th>分类名称th>
				<th>分类描述th>
				<th>操作th>

			tr>
			<tr>
				<td class="thclass"><input type="checkbox" class="cb" />td>
				<td>0td>
				<td>手机数码td>
				<td>手机数码类商品td>
				<td>
					<a href="#">修改a>|
					<a href="#">删除a>
				td>

			tr>
			<tr>
				<td class="thclass"><input type="checkbox" class="cb" />td>
				<td>1td>
				<td>电脑办公td>
				<td>电脑办公类商品td>
				<td>
					<a href="#">修改a>|
					<a href="#">删除a>
				td>
			tr>
			<tr>
				<td class="thclass"><input type="checkbox" class="cb" />td>
				<td>2td>
				<td>鞋靴箱包td>
				<td>鞋靴箱包类商品td>
				<td>
					<a href="#">修改a>|
					<a href="#">删除a>
				td>
			tr>
			<tr>
				<td class="thclass"><input type="checkbox" class="cb" />td>
				<td>3td>
				<td>家居饰品td>
				<td>家居饰品类商品td>
				<td>
					<a href="#">修改a>|
					<a href="#">删除a>
				td>
			tr>
		table>
		<script>
			//表格颜色代码
			$("tr:even").css("background", "pink")
			$("tr:odd").css("background", "yellow")
			$("#tr1").css("background", "dimgray")
			$("#trr").css("background", "aliceblue")
		script>
	body>

html>

第二种方法:


<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<title>Bootstrap 101 Templatetitle>

		
		<link href="css/bootstrap.min.css" rel="stylesheet">

		
		
		

		
		<script src="js/jquery-1.11.0.min.js">script>
		
		<script src="js/bootstrap.min.js">script>

		<script type="text/javascript">
			/*实现全选和全不选*/
			function a(obj) {
				$(".c").prop("checked", obj.checked)
			}

			/*	$(function(){
					var a=$("table td:checked").length;
					var b=$("table td:checkbox").length;
					if(a==b){
						$(".c").prop("checked",true);
					}else{
						alert(223)
					}
				})*/

			$(function() {

				$("tbody input").click(function() {
					var a = $("#tb input").length;
					var b = $("#tb input:checked").length;
					$("th input").prop("checked", a == b)
				})
			})
		script>

		script>
	head>

	<body>
		<h1>你好,世界!h1>

		
		
		<div class="container row=6">
			
			<table class="table table-hover table-bordered">
				<tr>
					<th><input type="checkbox" id="thc" onclick="a(this)" />全选th>
					<th>学号th>
					<th>姓名th>
					<th>年龄th>
				tr>
				<tbody id="tb">
					<tr>
						<td><input type="checkbox" class="c" />td>
						<td>1001td>
						<td>提莫td>
						<td>20td>
					tr>
					<tr>
						<td><input type="checkbox" class="c" />td>
						<td>1002td>
						<td>德玛td>
						<td>52td>
					tr>
					<tr>
						<td><input type="checkbox" class="c" />td>
						<td>1003td>
						<td>奎因td>
						<td>32td>
					tr>
				tbody>
			table>
		div>
	body>

html>

你可能感兴趣的:(jquery,Javaweb)