使用Jquery实现复选框全选功能

最新推荐文章于 2022-08-20 00:12:13 发布
最新推荐文章于 2022-08-20 00:12:13 发布
阅读量493 收藏 1
点赞数
分类专栏： JavaScript 文章标签： html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36802979/article/details/105857373
版权

使用Jquery实现复选框全选功能

html/js:


```javascript
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.8.1.min.js"></script>
		<script>
			window.οnlοad=function(){
				$("#d1").find("input[name='option']").change(function(){
					//获取所有name为option的个数
					var chlen=$("#d1").find("input[name='option']").length;
					//获取所有name为option并且选中的个数
					var len=$("#d1").find("input[name='option']:checked").length;
					if(len==chlen){
						$("#d1").find("input[name='allCheck']").attr("checked",true);
					}else{
						$("#d1").find("input[name='allCheck']").attr("checked",false);
					}
				});
				
			}
			function selectAll(){
				var status=$("#d1").find("input[name='allCheck']").is(':checked');

				if(status==true){
					$("#d1").find("input[name='option']").attr("checked",true);
				}else{
					$("#d1").find("input[name='option']").attr("checked",false);
				}
			}
		</script>
	</head>
	<body>
		<div id="d1" style=" width: 100%;">
			<table border="1" style="margin: 0 auto;">
				<thead>
					<th><input type="checkbox" name="allCheck" οnchange="selectAll()"/>全选</th>
					<th>复选框全选实例</th>
				</thead>
				<tr>
					<td><input type="checkbox" name="option" />1</td>
					<td>作用</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="option" />2</td>
					<td>a。单击列头复选框全选或不选子项</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="option" />3</td>
					<td>b。 只要有一个子项没有选中，则取消列头的选中转态</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="option" />4</td>
					<td>c. 当所有子项目选中时，列头复选框自动设置为选中状态</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="option" />5</td>
					<td>将复选框反过来选</td>
				</tr>
			</table>
		</div>
	</body>
</html>

``页面效果：
在这里插入图片描述

qq_36802979
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现全选、反选、取消全部等操作(复选框checkbox)
m0_61549984的博客
04-17 1065
this.checked){//一旦有一个未选中，则全选按钮 设置不选中。//将全选框的checked属性设置为false，也就是不选中全选框。//当前控件是选中的则设置为不选中，当前控件未选中的则设置为选中。$(this).parent().parent()是祖父节点tr。//选择class="userid"的控件，设置全部都不选中。//选择class="userid"的控件，让全部都选中。//选择class="userid"的控件，并执行循环。//选择class="userid"的控件。
复选框jQuery
qq_43618136的博客
02-16 141
复选框jQuery $(function () { //全选和全不选 //获取thead中的复选框,获取他的这个选中的状态 // $("#j_cbAll").click(function () { // //获取当前的复选框的选中状态 // var flag= $(this).prop("checked"); // ...
jquery 实现复选框的全选操作实例代码
12-29
jquery 实现复选框的全选操作实例代码 最近做了个需求，需要实现列表复选框的全选/取消全选操作，由于之前对这块不是很了解，所以从网上查了一些资料，虽然有各种实现方法，但没找到直接可以套用的。自己琢磨了下，把功能实现，整理如下。 实现细节如有可改进的地方，不吝赐教。 首先是html部分的代码，这里有一个表格，表格里面有一些选项： <div id=list> <table> <tr><td>选项1<input type=checkbox name=group value=1/></tr> <tr><td>选项2<input type=checkbo
JQuery复选框全选
叶卡捷琳堡的博客
01-22 493
JQuery复选框全选 以下是具体的代码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--加载JQuery文件--> <script type="text/javascript" src="JQuery.js"></script> <script type="text/ja
jquery实现多选框全选、反选、自动全选、自动取消全选
wwwwwww31311的博客
04-07 2292
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div class="wrap"> <table border="1px solid"> <thead> <tr> <th&
【JS/JQ】复选框的全选操作
CountryShi的博客
12-15 476
//全选操作 1.第一种方法JS，此方法用于多级菜单前复选框（如下图） function setMenu(id) { var checklist = document.getElementsByName("Menu" + id);//getElementsByName：取出复选框的name值 if (document...
jQuery实现多选框全选/全部选
言辞i的博客
01-18 3097
用js jquery 的方法实现全选/全不选； 1.html代码： <label for="all" id="labelall">全选</label> <input type="checkbox" id="all"> <ul id="ul"> <li> <label for="all">手机</label> <input type="checkbox"
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:  $(function(){  $(“#checkedAll”).click(function(){  $(‘[name=items]:checkbox’)...
JQuery复选框全选效果如何实现
11-21
如何获取所有复选框：document.getElementsByName、 需求分析 ​ 在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理 技术分析 第一种方法：选择器[属性名称=’属性值’] $(“input[type=’checkbox’]:...
jQuery实现复选框全选/取消全选/反选及获得选择的值
10-25
主要介绍了jQuery实现的复选框全选/取消全选/反选及获得选择的值,需要的朋友可以参考下
方便实用的jQuery checkbox复选框全选功能简单实例
10-26
介绍了jQuery checkbox复选框全选功能的代码实例，有需要的朋友可以参考一下
jquery复选框CHECKBOX全选、反选
01-19
使用方法:我们先把下面的JS保存为有个文件,到时候调用，淡然你也可以直接写在页面内,推荐使用前者,方便重用: 代码如下:(function($){ $.fn.checkgroup = function(options){ //merge settings settings=$.extend({ ...
jquery实现多选框全选全不选
IBLiplus的博客
10-31 643
其实是一个很简单的功能，有的时候在网上找的文档，里面写的根本就不管用，索性自己备份一下吧！ 代码如下，绝对好使： function bit(){ if($("#purchasingckAll").is(':checked')){ $('input[data="id"]').each(function(){ $(this).prop("checked",true); }); ...
Jq实现复选框的全选（Jq属性操作）
cuterabbitbaby的博客
09-20 1042
jq多选框全选，多选
weixin_30794499的博客
08-26 368
html代码 <input type="hidden" name="f_information_id" id="f_information_id" value="<?php echo $f_information_id?>"> <table class="table table-hover"> <thead> <tr...
jQuery实现复选框全选功能
zifengye520的专栏
05-30 692
使用jQuery实现复选框的功能，子框全选后，复选框自动选中；子框有一个未选中，复选框自动切换到未选中状态 js代码部分如下： function doCheck(obj){ var isCheck=obj.checked; var inputs=$("input[name='one']"); for(var i=0;i<inputs.length;
jquery attr（）方法实例之多选框全选
明天的你会感谢今天的自己
10-24 1189
attr（）方法在jquery中也很常用，但它用法却有两个：       当该方法用于返回属性值，则返回第一个匹配元素的值：该例子返回img 对象的width属性 &lt;script&gt; $(document).ready(function(){ $("button").click(function(){ alert("图片宽度: " + $("img").attr("width...
JQ对复选框全选、获取复选框的值、回选
C2974819879的博客
08-20 2092
JQ对复选框全选、回选、获取复选框的值
用jq实现复复选框全选和个别选项
ChenHN98的博客
10-27 361
难点： 如何在点击全选框之后每个选择框会被选中 如何在点击每个单机框之后全选框会被选中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content...
jquery复选框全选
最新发布
10-19
jquery复选框全选是指通过jquery库中的方法实现对多个复选框的全选或全不选操作。具体实现方法如下： 1. 给全选按钮绑定点击事件，获取所有的复选框元素。 2. 遍历所有的复选框元素，将它们的选中状态设置为全选按钮...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值