复选框的练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>复选框的全选与单选问题</title>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="../js/jquery-2.1.1.min.js" ></script>
		<style>
			th{
				padding:10px 20px;
			}
			.add{
				margin: 20px 0px;
			}
			.yel{
				background: yellow;
			}
		</style>
	</head>
	<body>
		<!--练习要求:
			1.点击新增按钮,表格增加一行,序号依次递增;同时,如果表头的复选框必定是不被新增的状态
			2.点击表头的复选框:
				I.选中:表身所有复选框被选中,对应的行变黄;
				II.不选中:表身所有复选框不被选中,对应行恢复白色;
			3.点击表身的复选框:
				I.该行变黄或恢复原来的颜色;
				II.当所有表身的复选框被选中,表头的复选框也会被选中;
			4.点击删除按钮:
				I.删除本行
				II.如果删除了本行,恰好其他行都是被选中的状态,则全选按钮也被选中
		-->
		<form style="text-align: center;">
			<input onclick="add()" type="button" class="add" value="新增" />
			<table border="1px solid black" align="center" >
				<thead>
					<tr>
						<th><input onclick="selectAll(this)" type="checkbox" class="selectAll" /></th>
						<th>序号</th>
						<th>删除</th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
			</table>
		</form>	
		<script>
			//自动生成的序号
			var count = 0;
			//新增一行,全选按钮不打勾
			function add(){
				$(".selectAll").prop("checked",false);
				count++;
				var str = $("<tr><td><input class='each' onclick='selectOne(this)' type='checkbox' /></td>" +
							"<td>" + count + "</td><td><input onclick='del(this)' type='button' value='删除' /></td>	" +			
						"</tr>");
				$("tbody").append(str);		
			}
			function del(obj){
				$(obj).parent().parent().remove();
				charge();
				
			}
			//每个复选框的点击事件
			function selectOne(obj){
				//该行变黄
				if ($(obj).prop("checked") == true) {
					$(obj).parent().parent().addClass("yel");	
				}else{
					$(obj).parent().parent().removeClass("yel");
				}
				charge();
			}
			//判断全选按钮是否改被选中
			function charge(){
				var flag = 0;
				for(var i = 0; i < $(".each").length; i++){
					if($(".each").eq(i).prop("checked") == true){
						flag++;
					}
				}
				//判断表身的复选框是否全部被选中了
				if (flag == $(".each").length && flag > 0) {
					$(".selectAll").prop("checked",true);
				}else{
					$(".selectAll").prop("checked",false);
				}
			}
			//总的复选框
			function selectAll(obj){
				if ($(obj).prop("checked") == true) {
					$(".each").prop("checked",true);
					$(".each").parent().parent().addClass("yel");
				}else{
					$(".each").prop("checked",false);
					$(".each").parent().parent().removeClass("yel");
				}
			}
		</script>
	</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值