jquery实现全选、不选、反选的两种方法

2024-11-29 05:31:27

在取复选框checkbox的属性checked属性值时，发现一个问题，就是当用attr取值时，真的为"checked",假的为"undefined";当用prop取值时，真的为"true",假的为"false"。经过网上参考一些资料，及根据官方的建议这两个用法：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。

方法一：

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>全选、不选、反选 1</title>
 <script src="jquery.min.js"></script>
 <script>
 $(function(){
 $('.check .btn1').click(function(){//全选
$('.music :checkbox').prop('checked',true);
 });

 $('.check .btn2').click(function(){//全不选
$('.music :checkbox').prop('checked',false);
 });

 $('.check .btn3').click(function(){//反选
$('.music :checkbox').each(function(){
 $(this).prop('checked',!$(this).prop('checked'));
 });
 });
 });
 </script>
</head>
<body>
 <div class="music">
 <input type="checkbox" name="music1" value="小白兔">小白兔<br>
 <input type="checkbox" name="music2" value="小燕子">小燕子<br>
 <input type="checkbox" name="music3" value="哈巴狗">哈巴狗<br>
 <input type="checkbox" name="music4" value="小青蛙">小青蛙<br>
 <input type="checkbox" name="music5" value="数鸭子">数鸭子<br><br>
 </div>
 <div class="check">
 <button class="btn1">全选</button>
 <button class="btn2">全不选</button>
 <button class="btn3">反选</button>
 </div>
</body>
</html>

方法二：

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>全部由jquery动态生成</title>
 <script src="jquery.min.js"></script>
 <script>
 function checkAll(){//全选
$(":checkbox").prop("checked",true);
 }
 function checkNo(){//全不选
$(":checkbox").prop("checked",false);
 }
 function checkRev(){//反选
$(":checkbox").each(function(){
 $(this).prop("checked",!$(this).prop("checked"));
 });
 }

$(function(){
 var sec=$("<div></div>").appendTo($("body"));//创建一个div追加到body里面
var input="";//创建一个空的变量
for(var i=0;i<5;i++){
 var index=i+1;
 input+="<input type='checkbox' name='标题'"+index+"value='标题'"+index+">"+"标题"+index+"<br>";
 }//把从0到4每一个创建的input收集到空变量里面
sec.append(input);//再把这些收集到的所有input追加到div里面

sec.append($("<button onclick='checkAll()'>全选</button>"));//创建全选按钮，并追加到div里面
sec.append($("<button onclick='checkNo()'>全不选</button>"));//创建全不选按钮，并追加到div里面
sec.append($("<button onclick='checkRev()'>反选</button>"));//创建反选按钮，并追加到div里面
});
 </script>
</head>
<body>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jquery实现简单的全选和反选功能

首先我们看个简单的实例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"&g
用JQuery实现全选与取消的两种简单方法

用JQUERY实现全选和取消全选,没有js那么繁琐,而且支持更多浏览器. 复制代码代码如下: <mce:script type="text/javascript"><!-- $(function() { $("#checkall").click(function() { $("input[@name='checkname[]']").each(function() { $(
jQuery菜单实例(全选,反选,取消)

废话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="全选" onclick="chec
jquery复选框全选/取消示例

功能: a:实现点击复选框的时候全选所有的子复选框,再点击取消所有复选框的选中状态 b:有一个子复选框选中则父复选框选中所有子复选框都不选中则父复选框不选中复制代码代码如下: /** * 全选函数 * @param mainId 主复选框id * @param klass 下属复选框的class */function selectAll(mainId,klass){ $("." + klass).each(function(){ if($("#" +
jQuery实现复选框全选/取消全选/反选及获得选择的值

复制代码代码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function() { // 全选/取消全部 $(&qu
jQuery 全选全部选反选实现代码

1.概述在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example <html> <body> <form id="test-form" action="test"> <legend>请选择想要学习的编程语言:</legend> <fieldset> <p><label class="selectAll"><input
jQuery Checkbox 全选反选的简单实例

1.全选.反选 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="http://xiazai.jb51.net/201611/yuanma/jquery(jb51.net).rar"></script> <script type="text/javascript"
jquery的ajax提交form表单的两种方法小结(推荐)

jquery的ajax提交form表单的两种方法小结(推荐) 方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx"; alert($('#formAddHandlingFee').serialize()); $.ajax({ type: "POST", dataType: "html", url:
jquery实现全选、不选、反选的两种方法

在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用prop取值时,真的为"true",假的为"false".经过网上参考一些资料,及根据官方的建议这两个用法:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr(). 方法一:
gridview实现服务器端和客户端全选的两种方法分享

复制代码代码如下: <%@ Page Language="C#" AutoEventWireup="true"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="
PHP自动补全表单的两种方法

效果图: 第一种:从数据库中检索之后补全第二种:邮箱等纯前端的补全先说第二种,使用开源的插件,所以相对简单. github上面的项目 completer. https://github.com/fengyuanchen/completer 做法特别容易,github上面有详细的文档. 一开始尝试用这个来配上自己的后台代码,做成第一种的自动补全,搞了半天失败了.可能本人js太差,改动太多的话,代码很复杂,除非认真研究上面这个开源项目. 主要失败在我在后台数据库找出来的完整的模糊查询得到的数据,
使vue实现jQuery调用的两种方法

引言如果说vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞.MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作.而vue的渐进式开发(逐步引用组件,按需引入),也让许多新手前端开发人员逐步绕过对jQuery的学习.jQuery需要记忆的内容颇多,这也让jQuery变得不那么受新入行开发者喜欢. 在前端工程化的需求没有普及的时候,许多公司使用的是后端渲染技术,为了能够实现友好的前端交互效果,需要写好大量的jQuery.JavaScript和CSS,
django中使用jquery ajax post数据出现403错误的解决办法(两种方法)

在django中,使用jquery ajax post数据,会出现403的错误方法一: 如果用jQuery来处理ajax的话,Django直接送了一段解决问题的代码.把它放在一个独立的js文件中,在html页面中都引入即可.注意这个js文件必须在jquery的js文件引入之后,再引入即可 $(document).ajaxSend(function(event, xhr, settings) { function getCookie(name) { var cookieValue = null;
基于jQuery实现图片推拉门动画效果的两种方法

''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul>  <li&g
Js类的静态方法与实例方法区分及jQuery拓展的两种方法

上学时C#老师讲到对象有两类方法,静态方法(Static)和实例方法(非Static),当时不理解静态是为何意,只是强记. 后来从事了前端的工作,一直在对类(即对象,Js中严格来说没有类的定义,虽众所周知,这里还是赘述一番,以免产生歧义)的操作上,严重缺乏整体概念,最近看extetnd中再次提到拓展静态方法与实例方法,故而再次百度,才幡然领悟,其实一直有用,只是不知其专业术语呀,哈哈~ 静态方法,属于类的方法,即类可以直接调用的方法.为类所有实例化对象所共用(但不能用实例对象之间调用),所以静态
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)

在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. (1)通过aspx.cs的静态方法+WebMethod进行处理简单的介绍下WebMethod方法的用法 1.修饰符主要用public static修饰 2.方法前面加上[WebMethod]属性表明这是WebMethod方法 3.前台html页面(Client端)访问时要使用post方法,和后台.cs文件进行数据交互,否则会返回整个html页面. 4.当后台页面返回数据后
Jquery中ajax提交表单几种方法(get、post两种方法)

在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息格式 $(selector).get(url,data,success(response,status,xhr),dataType

jquery实现全选、不选、反选的两种方法

相关推荐

随机推荐