用jquery实现全选/全部选功能(jquery-1.9.x 版本以上)，使用 prop 属性

最新推荐文章于 2019-10-21 19:20:02 发布
最新推荐文章于 2019-10-21 19:20:02 发布
阅读量661 收藏 1
点赞数
分类专栏： Web前端开发 
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>checkBox</title>
<script src="jquery-1.11.1.js"></script>	
<script language="javascript" type="text/javascript">
	$(function () { 
		//全选或全不选 
		$("#all").click(function(){    
			if(this.checked){    
				$("#list :checkbox").prop("checked", true);   
			}else{    
				$("#list :checkbox").prop("checked", false); 
			}    
		 });  
		//全选   
		$("#selectAll").click(function () { 
			 $("#list :checkbox,#all").prop("checked", true);   
		});   
		//全不选 
		$("#unSelect").click(function () {   
			 $("#list :checkbox,#all").prop("checked", false);   
		});   
		//反选  
		$("#reverse").click(function () {  
			 $("#list :checkbox").each(function () {   
				  $(this).prop("checked", !$(this).prop("checked"));   
			 }); 
			 allchk(); 
		}); 
		  
		//设置全选复选框 
		$("#list :checkbox").click(function(){ 
			allchk(); 
		}); 
	   
		//获取选中选项的值 
		$("#getValue").click(function(){ 
			var valArr = new Array; 
			$(":checkbox[name=checkboxBtn]:checked").each(function(i){ 
				valArr[i] = $(this).val(); 
			});
			//$("#list :checkbox[checked]").each(function(i){ 
			//	valArr[i] = $(this).val(); 
			//}); 
			var vals = valArr.join(','); 
			  alert(vals); 
		}); 
	});  
	function allchk(){ 
		var chknum = $("#list :checkbox").size();//选项总个数 
		var chk = 0; 
		$("#list :checkbox").each(function () {   
			if($(this).prop("checked")==true){ 
				chk++; 
			} 
		}); 
		if(chknum==chk){//全选 
			$("#all").prop("checked",true); 
		}else{//不全选 
			$("#all").prop("checked",false); 
		} 
	}
</script>
<body>

	<ul id="list">   
	   <li><label><input type="checkbox" name="checkboxBtn" value="1"> 1.我是记录来的呢</label></li> 
	   <li><label><input type="checkbox" name="checkboxBtn" value="2"> 2.哈哈，真的太天真了</label></li> 
	   <li><label><input type="checkbox" name="checkboxBtn" value="3"> 3.爱上你是我的错吗？</label></li> 
	   <li><label><input type="checkbox" name="checkboxBtn" value="4"> 4.从开始你就不应用爱上我</label></li> 
	   <li><label><input type="checkbox" name="checkboxBtn" value="5"> 5.喜欢一个人好难</label></li> 
	   <li><label><input type="checkbox" name="checkboxBtn" value="6"> 6.你在那里呢</label></li> 
	</ul> 
	<input type="checkbox" id="all"> 
	<input type="button" value="全选" class="btn" id="selectAll">   
	<input type="button" value="全不选" class="btn" id="unSelect">   
	<input type="button" value="反选" class="btn" id="reverse">   
	<input type="button" value="获得选中的所有值" class="btn" id="getValue">
    

</body>
</html>

LutosX
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用JQuery实现全选的功能
Tech_monkey的博客
06-07 2477
全选功能代码的原理： 1、当点击全选的复选框的时候就将指定的复选框全部打上勾（就是将状态变成checked） 2、选了一部分的复选框后再点击全选复选框，先获取当前复选框的数量，然后将剩下的复选框打勾 /*全选框的id*/ 标题 标题 内容 内容
jquery prop()函数实现全选/全不选
冰儿No2
05-29 551
jquery prop()函数实现全选/全不选
Jquery1.9 attr、prop的用法
zpryan的专栏
09-28 570
attr(attr,value) 更改属性值，除checked, selected disabled ） Prop(attr,value) 更改属性值，用于checked, selected disabled ）     demo function hi
Jquery中对checkbox的各种“全选”或者“取消”功能实现（特别注意1.6+的一定不能使用attr来取属性了！用prop！）...
weixin_33772645的博客
01-08 52
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; ..
jquery-1.9.x.min.js
01-16
IE8兼容时使用的jquery版本jquery.1.9.0--jquery.1.9.1
利用jQuery实现CheckBox全选/全不选/反选的简单代码
11-24
jQuery有些版本中实现CheckBox全选/全不选/反选会有bug，经测试jquery-1.3.1.js–>测试通过，jquery-1.5.1.js–>测试不通过。 实现CheckBox全选/全不选/反选代码如下： <%@ page language="java" ...
jQuery实现checkbox列表的全选、反选功能
11-26
本篇文章将详细探讨如何使用jQuery实现复选框列表的全选和反选功能，特别是如何通过自定义属性实现高效的封装。 首先，我们需要了解jQuery中的`:checkbox`选择器，它是用来选取所有复选框元素的。在给定的示例代码...
js与jQuery实现checkbox复选框全选/全不选的方法
10-23
总的来说，JavaScript和jQuery都可以轻松实现复选框的全选/全不选功能，但jQuery提供的API更加简洁，可读性更强，减少了DOM操作的复杂性。开发者可以根据项目需求和团队偏好选择合适的方法来实现这一功能。
jquery实现checkbox 全选/全不选的通用写法
10-26
在jQuery中，实现复选框（checkbox）的全选/全不选功能是常见的需求，尤其是在数据筛选、表格操作等场景。本篇文章将详细介绍如何使用jQuery编写一个通用的全选/全不选功能。 首先，我们需要理解jQuery选择器的工作...
jquery实现全选和全不选功能效果的实现代码【推荐】
10-22
下面小编就为大家带来一篇jquery实现全选和全不选功能效果的实现代码【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考
jQuery使用prop属性全选与取消全选
我的开发博客(公众号:Web后端技术)
12-14 1317
jQuery使用prop属性全选与取消全选 在使用jQuery开发全选或取消全选时，用 attr("checked") 获取 checkbox 的 checked属性时, 如果是选中状态可以取到值, 但是在未选中的时候获取值就是undefined。 jQuery1.6中新加了一个方法prop(), 用来获取在匹配的元素集中的第一个元素的属性值。 现在使用prop方法获取属性, 则统一返回tru...
用Jquery来实现全选/全不选，反选。
Casset。
10-21 271
jQuery代码全选/全不选反选 全选/全不选 $(function() {//全选和全不选 $("#all").on("click",function() {//当我们点击按钮时 if (this.checked==true) {//如果复选框是选中的 $("input[name='id']").attr("checked","checked");//我们就让name=’id’...
将早期版本的jQuery迁移到jQuery 1.9
02-25 114
老功能ALOT有（1.9.x的），并会从jQuery库中移除（2.X），与过时的歌曲，后者除支持。 展望2013向前jQuery将如何支持IE是相当的辩论。 使用插件不再存在可能会破裂并开始产生错误的函数。 您可能会开始看到出现的错误，如果你使用了最新版本，包括jQuery的过去（见下文），因为这只是拉最新版本。 //jQuery API 因为错误可能会开始出现一些功能已经在jQuery的...
jQ全选选择器（*选择器）
ilbba的博客
08-13 194
<script type="text/javascript"> //获取页面中所有的元素 var elements2 = $("*"); //原生与jQuery方法比较 //===表示数据和类型都相等 if(elements2.length === elements1.length){ elements2.css("border...
jQuery方法解析(二)prop
菜园子
11-23 6575
昨天媳妇挑了一个append，今天挑了一个prop，还真会挑......             接下来几天的jq均已jq1.7.1这个版本为例。 跟昨天一样，我们先来看看api是怎么写的： 获取在匹配的元素集中的第一个元素的属性值。 看完api你是否觉得和attr函数很想呢？如果还不了解attr那么请你祈祷俺媳妇早日挑到这个函数吧。 好了我们来看函数吧，这个
Jquery-1.8.x 与Jquery-1.9.x, Jquery-1.10.x对checkbox操作方法的支持
代码大兵
09-17 1773
个人比较喜欢用最新版本的工具或框架，最近在做的项目中用了jquery1.10.2，可是对checkbox的全选/反选上竟然出现了问题，之前用jQuery-1.8.3可是好好的，最后在网上找到了答案： 使用1.8.3版本，以下方法是可行的 $("input[type='checkbox']").attr("checked",true); $("input[type='checkbox']"
怎样用jquery实现快速的全选全不选，超简单
马一文
12-19 356
function checkAll(e) { if($(e).prop("checked") == true) { $("input[class='classA']").prop('checked', "checked"); } else { $("input[class='classA']").prop('checked', ""); } }
高版本jQuery设置checkbox状态注意事项
weixin_30293135的博客
12-06 145
jQuery 1.9 以后, 使用 .attr(“checked”, true) 或 attr(“checked”, “checked”) 将无法正确设置 checkbox的状态, 同样的, 使用 .attr(“checked”) 也无法正确获取checkbox的状态 请从看到这篇文章开始, 使用 .prop(“checked”, true) 和 .prop(“checkbox”) ...
jquery .prop()的相关操作——全选、反选、获得所有选中的checkbox
唐策的博客
07-05 780
全选、全部选 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input</title> <script src="js/jquery-1.11.1.js"></script> <script> $(function(){ $('#se
使用jquery完成九九乘法表、全选/全不选、反选功能、轮播图
最新发布
07-28
以下是使用 jQuery 实现九九乘法表、全选/全不选、反选功能和轮播图的示例代码： 1. 九九乘法表： ```html <!DOCTYPE html> <html> <head> <title>九九乘法表</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <table id="multiplication-table"> <tbody></tbody> </table> <script> $(document).ready(function() { var table = $('#multiplication-table tbody'); for (var i = 1; i <= 9; i++) { var row = $('<tr></tr>'); for (var j = 1; j <= 9; j++) { var cell = $('<td></td>').text(i + ' × ' + j + ' = ' + (i * j)); row.append(cell); } table.append(row); } }); </script> </body> </html> ``` 2. 全选/全不选、反选功能： ```html <!DOCTYPE html> <html> <head> <title>全选/全不选、反选功能</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <label><input type="checkbox" id="check-all"> 全选/全不选</label><br> <input type="checkbox" class="checkbox-item"> Item 1<br> <input type="checkbox" class="checkbox-item"> Item 2<br> <input type="checkbox" class="checkbox-item"> Item 3<br> <button id="invert-selection">反选</button> <script> $(document).ready(function() { $('#check-all').change(function() { $('.checkbox-item').prop('checked', $(this).prop('checked')); }); $('#invert-selection').click(function() { $('.checkbox-item').each(function() { $(this).prop('checked', !$(this).prop('checked')); }); }); }); </script> </body> </html> ``` 3. 轮播图： ```html <!DOCTYPE html> <html> <head> <title>轮播图</title> <style> .slider { width: 300px; height: 200px; overflow: hidden; position: relative; } .slider img { width: 100%; height: 100%; position: absolute; transition: opacity 1s ease-in-out; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div class="slider"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> <script> $(document).ready(function() { var slider = $('.slider'); var images = slider.find('img'); var currentIndex = 0; function showImage(index) { images.css('opacity', 0); $(images[index]).css('opacity', 1); } function nextImage() { currentIndex = (currentIndex + 1) % images.length; showImage(currentIndex); } setInterval(nextImage, 2000); }); </script> </body> </html> ``` 请注意替换示例中的图片路径和文件名，确保图片可以正确加载。希望能对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值