正文

26.jquery全选和全不选

重庆刘亦菲  重庆刘亦菲  2022-10-17  633

关键词：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<title>Insert title here</title>

<script type="text/javascript">
	$(function(){
		
		//全选
		$("#selAll").click(function(){
			//获取所有复选框，设置checked属性
			$("input[type=‘checkbox‘]").attr("checked","checked");
			
		});
		
		//全不选
		$("#selNo").click(function(){
			$("input[type=‘checkbox‘]").removeAttr("checked");
		});
		
		//在boxId上绑定点击的事件，判断当前复选框是否被选中，如果被选中，3个爱好都被选中
		$("#boxId").click(function(){
			//判断当前复选框是否被选中
			if($(this).attr("checked")=="checked"){
				$("input[type=‘checkbox‘]").attr("checked","checked");
			}else{
				$("input[type=‘checkbox‘]").removeAttr("checked");
			}
		});
		
		//在爱好上绑定事件
		$("input[name=‘hobby‘]").click(function(){
			//判断3个爱好被选中的个数
			if($("input[name=‘hobby‘]:checked").size()==3){
				//全被选中了
				$("#boxId").attr("checked","checked");
			}else{
				$("#boxId").removeAttr("checked");
			}
		}); 
		
		
	});

</script>

</head>
<body>

<h3>全选全不选</h3>

<input type="checkbox" id="boxId" />全选/全不选<br/>

<input type="checkbox" name="hobby" />抽烟<br/>
<input type="checkbox" name="hobby" />喝酒<br/>
<input type="checkbox" name="hobby" />烫头<br/>

<input type="button" value="全选" id="selAll"/>
<input type="button" value="全不选" id="selNo"/>

</body>
</html>

jquerycheckbox的全选和全不选

刚学Jquery，在做checkbox的全选全不选时遇到了一个问题，使用attr()方法的话，只能成功全选和取消全选一次，第二次就不行了，如下面$("#chkAll").click(function(){if(this.checked==true){$("#tabinput[type=‘checkbox‘]").attr("checked",true);}else{$("#tabi... 查看详情

javascript实现全选和全不选

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <script> functionselectAll(num){ //获取下面的四个复选框 varres=document.getElementsByClassN 查看详情

前端小demo——全选和全不选

模拟购物车，实现全选或者全不选，或者其中任意一件单品单选的效果。点击顶部复选框实现全选列表中任意一项未选中，顶部复选框就是未选中的状态<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></t... 查看详情

多选框的全选和全不选(复制)

jQuery实现的全选、反选和不选功能本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希... 查看详情

js实现checkbox的全选和全不选功能

html代码：<formname="form1"method="post"action="manage.php?act=sub"><inputtype="checkbox"name="mm[]"value="<?=$row[‘0‘]?>"onClick="checkAll(this,‘mm‘)">< 查看详情

jquery学习——使用jq完成复选框的全选和全不选

...删除，使用jq完成全选和全不选步骤分析：第一步：引入jquery文件第二步：书写页面加载函数第三步：为上面的复选框绑定单击事件第四步：将下面所有的复选框的选中状态设置成跟上面的一致！2、具体代码实现：1<!DOCTYPEhtml&... 查看详情

jquery案例二：实现全选全不选和反选(代码片段)

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>全选和全不选以及反选</title><scriptsrc="../js/jquery-1.8.3.js"></script><script>$(function()//全选事件$(" 查看详情

jq——选择器的应用（表格的隔行换色全选和全不选）(代码片段)

...成绩登记表格</title><scripttype="text/javascript"src="../js/jquery-1.8.3.js"></script> <script> $( 查看详情

vue2.0实现全选和全不选(代码片段)

实现思路：1、v-model一个收集所有input（除全选框外）数组checkModel，vue会动态将其checked为true的input的value值存入数组checkModel里2、watch函数来监听checkModel属性，当其长度==input元素时全选按钮选中否则取消3、全选按钮v-modelchecked属... 查看详情

jquery版的全选，全不选和反选

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <scriptsrc="js/jquery.js"type="text/javascript"charset="utf-8"></script> <title></title> </head& 查看详情

多选框checkbox全选全不选和反选

在判断多选框中的某一个是否被选中时，我们可以用checked的属性选中了就返回true，没被选中就返回false;这是html代码：<formaction="#"><labelfor="hobby">爱好：</label><labelfor="hobby1"><inputtype="checkbox"name="hobby"id="hobby1 查看详情

jquery判断checkbox是否选中及改变checkbox状态

在用jquery判断checkbox的选中上.在用的$().attr(‘checked‘)做全选和反选的时候出现一个问题,点第一二次可以选中和全不选,但第三次的时候就没有反应了之后用了$().prop() 就可以了//全选和全不选$("#allorone_check").click(function(){... 查看详情

jquery实现复选框全选全不选反选问题解析

　　今天打算用jQuery实现一下复选框的全选、全不选和反选问题，刚开始用的是attr("checked",true/false)方法，发现只能在最开始实现一次全选，可以实现全不选，无法实现反选，总之调试了好久死活得不到想要的效果。最后发现，j... 查看详情

js中checkbox全选怎么写

js中checkbox全选怎么写就是一个全选checkbox选中后下面的全选，取消后下面的也取消，下面的全点上后上面的全选也自动点上，怎么写求大神指导参考技术A$("#check_groupinput[type='checkbox']").each(function()$(this).attr("checke... 查看详情

uni-app全选/全不选

参考技术A单个选中全选/全不选模拟数据当每个商品都选中了变为全选/当全选里有一个不选，取消全选查看详情

checkbox实现全选全不选

1.jQuery实现checkbox全选全不选<!DOCTYPEhtml><headrunat="server"><title>jQuery实现CheckBox全选、全不选</title><metacharset="utf-8"><scriptsrc="jquery-3.1.1.min.js"></script>& 查看详情

jquery应用实例3：全选二级联动

全选：这里是用JS实现的：http://www.cnblogs.com/xuyiqing/p/8378221.html如果使用jQuery则会方便很多：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>全选和全不选</title><scripttype="text 查看详情

jq全选全不选

$(document).ready(function(){$("#isalldebt").click(function() { if($(this).attr("checked")){//全选 $("input[name=‘debt_type‘]").each(function(){ $(this).attr("checked",true); 查看详情