jquert基本使用

最新推荐文章于 2024-10-25 15:36:36 发布

沉迷学习一一无法自拔

最新推荐文章于 2024-10-25 15:36:36 发布

阅读量706

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/tangxueqin/article/details/78996944

HTML5 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery实现复选框的全选和反选功能，特别是焦点集中在点击第一个复选框时，如何影响所有关联的复选框状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.checkbox复选框全选（点击第一个checkbox实现全选反选）

<style type="text/css">
			p{margin-left: 30px;display:inline}
		</style>
		<script>
			function data(){
				var e=document.getElementById("box");//找id
				var e_ck=document.getElementsByName("ck");//找name,可以通过相同name属性统一设置选中
				for(var i in e_ck){//for in 循环
					var e_input=e_ck[i];//获取到的每一个复选框
					e_input.checked=e.checked;//设置选中  且与全选的复选框相同
					
				}
			}
		</script>
	</head>
	<body>
		<input type="checkbox" onchange="data()" id="box"/><p>全选/不全选</p><br />
		<input type="checkbox" name="ck"/><p>看书</p><br />
		<input type="checkbox" name="ck"/><p>看电影</p><br />
		<input type="checkbox"  name="ck"/><p>打篮球</p><br />
	</body>

2.checkbox复选框全选（点击按钮实现全选反选）

              var a=true;
			//全选、反选
			  function qx(){
				var e_ck=document.getElementsByName("ck");//找name,可以通过相同name属性统一设置选中
				for(var i in e_ck){//for in 循环
					var e_input=e_ck[i];//获取到的每一个复选框
						e_input.checked=a;    //设置选中  且与全选的复选框相同	
				}
				a=!a;
			  }

3.添加数据的方法(创建新的一行)

//添加数据的方法(创建新的一行)
			function add(){
				//第一列
				var $tr=$("<tr></tr>");
				$tr.append("<td><input type='checkbox' name='ck'/></td>");
				
				//input的name
				var xs=$("#name").val();
					var $td=$("<td></td>");
					$td.text(xs);
					$tr.append($td);
				//性别
				var va2=$("#sex option:selected").text();
				var $td1=$("<td></td>");
				$td1.text(va2);
				$tr.append($td1);
				
				//生日
				var xs1=$("#sr").val();
					var $td=$("<td></td>");
					$td.text(xs1);
					$tr.append($td);
				
				//获取住址
				var va5=$("#province option:selected").text();
				var va1=$("#city option:selected").text();
				var $td1=$("<td></td>");
				$td1.text(va5+"-"+va1);
				$tr.append($td1);
				
				//删除按钮
				$tr.append("<td><input onclick='del(this)' type='button' value='删除'/></td>")
				$("table").append($tr);
			}

4.删除一行

//删除一行
			function del(e){
				var td=$(e).parent().parent();
				td.remove();
			}

5.批量删除

 //批量删除
			  function delall(){
			  	var dels= $("input:checked[name='ck']");
					if(dels.length==0){
						alert("请选择要删除的元素");
						return;
					}
					//获取所有被选中的name为ck的元素
					$("input:checked[name='ck']").each(function(){
						$(this).parent().parent().remove();
					});
			  }

6.下拉菜单

性别：<select id="sex">
				
				<option value="男">男</option>
				<option value="女">女</option>
			</select>

7.完整添加，删除，批量删除，全选反选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{width:70%; height: 800px; margin: 0 auto; }
			
			.btn1{background: yellow;}
			.btn2{background: red;}
			.div1{float: right; padding: 10px;}
			table{width: 100%; }
		</style>
		<script src="js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			//添加数据的方法(创建新的一行)
			function add(){
				//第一列
				var $tr=$("<tr></tr>");
				$tr.append("<td><input type='checkbox' name='ck'/></td>");
				
				//input的name
				var xs=$("#name").val();
					var $td=$("<td></td>");
					$td.text(xs);
					$tr.append($td);
				//性别
				var va2=$("#sex option:selected").text();
				var $td1=$("<td></td>");
				$td1.text(va2);
				$tr.append($td1);
				
				//生日
				var xs1=$("#sr").val();
					var $td=$("<td></td>");
					$td.text(xs1);
					$tr.append($td);
				
				//获取住址
				var va5=$("#province option:selected").text();
				var va1=$("#city option:selected").text();
				var $td1=$("<td></td>");
				$td1.text(va5+"-"+va1);
				$tr.append($td1);
				
				//删除按钮
				$tr.append("<td><input onclick='del(this)' type='button' value='删除'/></td>")
				$("table").append($tr);
			}

			//删除一行
			function del(e){
				var td=$(e).parent().parent();
				td.remove();
			}
			var a=true;
			//全选、反选
			  function qx(){
				var e_ck=document.getElementsByName("ck");//找name,可以通过相同name属性统一设置选中
				for(var i in e_ck){//for in 循环
					var e_input=e_ck[i];//获取到的每一个复选框
						e_input.checked=a;    //设置选中  且与全选的复选框相同	
				}
				a=!a;
			  }
			  
			  
			  //批量删除
			  function delall(){
			  	var dels= $("input:checked[name='ck']");
					if(dels.length==0){
						alert("请选择要删除的元素");
						return;
					}
					//获取所有被选中的name为ck的元素
					$("input:checked[name='ck']").each(function(){
						$(this).parent().parent().remove();
					});
			  }
		</script>
	</head>
	<body>
		<div class="div">
		姓名：<input id="name" />  
		性别：<select id="sex">
				
				<option value="男">男</option>
				<option value="女">女</option>
			</select>  
		生日：<input type="date" id="sr" />  
		住址：<select id="province">
				<option value="0">北京</option>
				<option value="1">河南省</option>
			</select>
			  
			<select id="city">
				<option value="0">西二旗</option>
				<option value="1">中关村</option>
			</select>  
			<input type="button" value="添加" onclick="add()"/><br />
			<div class="div1">
			<button class="btn1" onclick="qx()">全选/反选</button>    <button class="btn2" onclick="delall()">批量删除</button>
			</div>
			<table border="1">
				<tr>
					<td><input type="checkbox"  name="ck"/> </td>
					<td>姓名</td>
					<td>性别</td>
					<td>生日</td>
					<td>住址</td>
					<td>删除</td>
					
				</tr>
				<tr>
				<td><input type="checkbox"  name="ck"/> </td>
					<td>张三</td>
					<td>男</td>
					<td>1995-04-24</td>
					<td>北京-西二旗</td>
					<td><input onclick="del(this)" type="button" value="删除"/></td>	
				</tr>
				<tr>
				<td><input type="checkbox"  name="ck"/> </td>
					<td>李四</td>
					<td>男</td>
					<td>1995-02-20</td>
					<td>郑州-二七区</td>
					<td><input onclick="del(this)" type="button" value="删除"/></td>	
				</tr>
				<tr>
				<td><input type="checkbox"  name="ck"/> </td>
					<td>王五</td>
					<td>女</td>
					<td>1995-03-20</td>
					<td>郑州-二七区</td>
					<td><input onclick="del(this)" type="button" value="删除"/></td>	
				</tr>
			</table>
			
			
			</div>
	</body>
</html>