前端框架jQ使用之全选全不选反选提交

最新推荐文章于 2022-04-13 20:46:09 发布
最新推荐文章于 2022-04-13 20:46:09 发布
阅读量782 收藏 2
点赞数
分类专栏： 前端实用总结 前端框架——jQuery 文章标签： 全选 全不选 反选 复选框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36793007/article/details/83002047
版权

在掌握了jQ的基础知识之后，我们来看看jQ如何复选框的全选全不选反选？

这个最终代码很简洁，其中有不少的注释代码，都是可以作为区别的，其中，最后一端会有使得浏览器奔溃的分险。

直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<form action="" method="post" id="love_form">
			你爱好的运动是?<br />
			<input class="ball" type="checkbox" value="足球"/>足球
			<input type="checkbox" value="蓝球"/>篮球
			<input type="checkbox" value="排球"/>排球
			<input type="checkbox" value="铅球"/>铅球<br />
			<input type="button" name="selectAll" id="selectAll" value="全选" />
			<input type="button" name="selectNotAll" id="selectNotAll" value="全不选" />
			<input type="button" name="selectBack" id="selectBack" value="反选" />
			<input type="button" name="submit" id="submit" value="提交" />
		</form>
	</body>
	<script type="text/javascript">
		$().ready(
			function(){//全选
				$("#selectAll").click(
					function(){
						$("input:checkbox").attr("checked","checked");
//						alert($("input").attr("checked"));
					}
				);
				$("#selectNotAll").click(// 全不选
					function(){
						$("#love_form input:checkbox").removeAttr("checked");
					}
				);
				$("#selectBack").click(// 反选
					function(){
						// 第一种：自定义循环方式
//						for (var i = 0;i < $("input:checkbox").size();i++) {
//							if($($("input:checkbox").get(i)).attr("checked") == "checked"){
//								$($("input:checkbox").get(i)).removeAttr("checked");
//							} else{
//								$($("input:checkbox").get(i)).attr("checked","checked");
//							}
//						}
//						// 第二种：通过each方法
						$("input:checkbox").each(
							function(){
//								$(this).attr("checked",!$(this).attr("checked"));// jq方法
								
								this.checked = !this.checked;// 第三种：简洁方法
							}
						);
					}
				);
				$("#submit").click(// 提交之后会弹框显示你选择的选项
					function(){
//						var box = $("input:checkbox:checked");
//						var str = "你选择的有：";
//						for (var i = 0;i < box.size();i++) {
//							str = str + box.get(i).value + "\t";
//						}
//						alert(str);
						
						// each方法
						var str = "你选择的有：";
						$("input:checkbox:checked").each(
							function(){
//								alert($(this).val());
								str = str + this.value + "\t";
							}
						);
						alert(str);
						// 一下代码有问题，会使得浏览器崩溃
//							alert($("input:checkbox:checked").val());//只会弹出一个
//							for (var i=0;$("input").size();i++ ) {
//								if ($($("input").get(i)).attr("checked") == "checked") {
//									alert($($("input").get(i)).val());
//								} 
//							}
					}
				);
			}
		);
	</script>
</html>

以上代码可以供学习交流直接使用，转载请声明来源。

BalanceWei
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现全选、反选、取消全部等操作(复选框checkbox)
m0_61549984的博客
04-17 1471
this.checked){//一旦有一个未选中，则全选按钮 设置不选中。//将全选框的checked属性设置为false，也就是不选中全选框。//当前控件是选中的则设置为不选中，当前控件未选中的则设置为选中。$(this).parent().parent()是祖父节点tr。//选择class="userid"的控件，设置全部都不选中。//选择class="userid"的控件，让全部都选中。//选择class="userid"的控件，并执行循环。//选择class="userid"的控件。
【JS】全选全不选反选
xxxxxwxx的博客
08-23 462
点击全选和反选实现对应功能，在全选状态下取消选中其中一个，全选按钮取消选择状态，四个全选中时，全选按钮自动选择。
js完成 全选，反选，全不选
qq_44864468的博客
10-13 190
做的练习 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="" method="post"> 你爱好的运动是？ <input type="checkbox" id="checkedAllBox" />全选/全不选
（前端开发）表格中的行全选、全不选、反选以及数据行背景色变换的示例代码
liaowenxiong的博客
12-03 595
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格数据行全选/全不选/反选的示例</title> <style> table { border: 1px solid; width: 500px; margin-left:
用js编写全选/全不选/反选
m0_53679993的博客
04-13 2167
运行出来的图片： 在html的代码如下： 在这里插入代码片 ```<form action="" method="post"> 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选 <br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="chec
JQuery实现全选、全不选、反选功能
12-12
JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态， 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的所有子复选框时，'全选'按钮应该是'选中'状态。 3、点点击'全不选'按钮时，当前页面的所有复选框置为非选中状态。 4、当点击'反选'按钮时，当前页面选中状态的复选框置为未选中状态，未选中状态的复选框置为选中状态。
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:  $(function(){  $(“#checkedAll”).click(function(){  $(‘[name=items]:checkbox’)...
jquery实现全选、不选、反选的两种方法
11-25
在取复选框checkbox的属性checked属性值时，发现一个问题，就是当用attr取值时，真的为”checked”,假的为”undefined”;当用prop取值时，真的为”true”,假的为”false”。经过网上参考一些资料，及...全选、不选、
jquery 实现全选，全不选，反选，获取选中的值
12-19
综上所述，使用 jQuery 实现全选、全不选、反选以及获取选中值的功能是相当直观和简单的。通过绑定事件处理器，我们可以轻松地响应用户的交互，动态地更新页面状态。结合 HTML 结构和适当的 CSS 样式，可以创建出...
jQuery对checkbox 复选框的全选全不选反选的操作
10-21
主要介绍了jQuery对checkbox 复选框的全选全不选反选的操作 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
jq中最简单全选与全不选
qq_35641923的博客
02-26 3873
id换成对应按钮的id，class为对应input的class $(document).on('click','#id',function(){ if($(this).is(":checked")){ $('.class').prop('checked',true); }else{ $('.class').prop('checked',false...
前端复选框全选功能代码
baidu_38995168的博客
06-12 2263
html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <html> <head> <meta charset...
弹出窗全选反选功能
siqilou的专栏
08-19 642
功能需求：弹出窗列表加载记录
JQuery全选反选案例
iTaylorfan的博客
06-30 327
JQuery版本3.5.1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选反选</title> <link rel="icon" href="logo.ico"> <script src="js/jquery-3.5.1.min.js"></script> <
jquery实现全选,全部取消,反选
Simon_cm的博客
11-02 1908
$(function(){ //全选 $("#btn1").click(function(){     $("input[type='checkbox']").prop("checked", true);  }) //全部取消 $("#btn2").click(function(){     $("input[type='checkbox']").prop("checked", fa
实现前端table中checkbox全选功能，并将选中的数据发送到后端
diaoyuan6818的博客
05-30 1384
一、需求 1. 点击这个checkbox按钮，会选中下面所用checkbox，当然在选中的情况下点击，会将下面所有选中的checkbox取消； 2. 当下面使用submit的提交按钮时，会将所有checkbox选中的数据提交给后端； 二、实现 1、实现全选checkbox功能 技术分析：其实这里可以使用js活着jquery两种方式，我暂时使用的是js中的dom实现的，...
jq实现多选反选
weixin_30379911的博客
06-21 113
<script type="text/javascript"> $('input [name="ckball"]').click(function () { if ($('input [name="ckball"]').attr("checked", true)) { $('input [name="ckb"]').attr("checked"...
jq 全选 单选 反选
a599194925的博客
04-12 495
//单选checkbox $(“input[name=actions]”).change(function () { var result=""; $("input[name='actions']:checked").each(function(){ result+=$(this).val()+','; }...
使用Jquery实现全选、全不选、反选功能
xia1140418216的博客
08-07 700
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <tit..
html全选全不选反选
最新发布
11-29
以下是HTML中实现全选、全不选和反选的代码示例： 1. 全选效果 ```html <!DOCTYPE html> 全选 function selectAll(){ var checkboxes = document.getElementsByName("fruit"); for(var i=0; i; i++){...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值