jquery实现全选、全不选、反选操作

最新推荐文章于 2024-08-19 15:26:06 发布
最新推荐文章于 2024-08-19 15:26:06 发布
阅读量55 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/qzjpkfj/p/4112306.html
版权 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html>
 3 <head>
 4     <title>新建网页</title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 6     <meta name="description" content=""/>
 7     <meta name="keywords" content=""/>
 8     <script type="text/javascript" src="../jquery-1.4.4.js" ></script>
 9 
10     <script type="text/javascript">
11         function selAll(){
12             $(".ho").attr('checked',true);
13         }
14         function selAllNot(){
15             $(".ho").attr('checked',false);
16         }
17         function selFan(){
18             //反选操作
19             //获得全部复选框、遍历、判断当前选中情况
20             for(var i=0; i<$(".ho").length; i++){
21                 var flag = $(".ho:eq("+i+")").attr("checked");
22                 $(".ho:eq("+i+")").attr("checked",!flag);
23             }
24         }
25     </script>
26 </head>
27 <body>
28 <h2>复选框操作</h2>
29 
30 <input type="checkbox" name="hobby[]" id="hobbya" class="ho" value='a'>篮球
31 <input type="checkbox" name="hobby[]" id="hobbyb" class="ho" value='b'>足球
32 <input type="checkbox" name="hobby[]" id="hobbyc" class="ho" value='c'>登山
33 <input type="checkbox" name="hobby[]" id="hobbyd" class="ho" value='d'>排球
34 
35 <br /><br />
36 <input type="button" value="全选" οnclick="selAll()" />
37 <input type="button" value="全不选" οnclick="selAllNot()" />
38 <input type="button" value="反选" οnclick="selFan()" />
39 </body>
40 </body>
41 </html>

 

转载于:https://www.cnblogs.com/qzjpkfj/p/4112306.html

weixin_30877493
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML新手——第一次制作个人简历
ALEXflame的博客
06-14 1万+
第一次制作个人简历： <!DOCTYPE html> <html> <head> <title>个人简历</title> <meta charset="utf-8"> </head> <body> <table width="50%" height="30%" cellpadding="5p...
jQuery选择器:input实现—全选，反选，取消（匹配所有 input, textarea, select 和 button 元素）
lnx0307的专栏
10-05 1695
webrx-title $(document).ready(function(e) {     $(':input[value=全选]').click(function(){         //alert($(this).val());             $('form :checkbox').prop("checked", true);     });       
【 jQuery 】利用 jQuery 选择器实现表格的全选，取消选择，单击更 改选中状态，反选等功能，为表格添加光棒效果
Acratons的博客
11-25 658
利用 jQuery 选择器实现表格的全选，取消选择，单击更 改选中状态，反选等功能。如图所示。点击全选按钮，选中所有行，点击取 消按钮，所有行为未选中状态，单击反选按钮，则选中的行变成未选中的； 未选中的行变成选中的。 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <l
使用JQuery表单选择器,实现全选/全不选/和反选的效果
weixin_42152880的博客
09-09 1058
使用JQuery表单选择器,实现全选/全不选/和反选的效果 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script type="text/javascript" src="js/jquery-1.8.3.js"&
jQuery实现全选全不选反选
qq_39845198的博客
03-06 681
<head> <meta charset="UTF-8"> <title>全选全不选反选</title> <script type="text/javascript" src="../jquery-1.7.2.js"></script> <script type="text/javascript"> `` ```javascript $(function () { //全选
jQuery实现全选、全不选以及反选操作
m0_37601917的博客
12-12 1110
在写购物车案例时实现全选操作使用的是js的getAttribute（）setAttribute（）方法获取checked属性的值是undefined实现完成之后全选操作，如果在全选中的情况下改变其中一个的状态再点击全选，之前被取消的将不在被选中。之后使用js的DOM.checked属相的获得是true或false，操作很方便，很完美没有bug。 　　学了jquery后单独实现下全选、全不选、反选...
使用jQuery实现全选，全不选和反选的效果
u_u2020的博客
05-16 1133
使用jQuery实现全选，全不选和反选的效果 上一篇我们用的是JavaScript的方法实现这个效果，接下来让我们用jQ uery的方法来实现一下。 首先第一步像上一篇一样，我们来写一下它的布局，现在我用的是radio，他是一个单选框，如果给这几个input标签一个name属性且相同的话，他就只能选择一个，否则它可以选多个，在这里我们不需要name属性，我们现在不用button按钮而用input标签，其实他们的效果都一样，我们只需把input里的type属性改成button就可以了如下： .
使用Jquery实现全选、全不选、反选功能
qqyang_的博客
07-16 838
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <titl.
JQuery实现全选、全不选和反选功能
热门推荐
林小米的博客
12-12 4万+
项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候，心想很简单的一个功能，几行代码就能搞定，然而事实并非如此。下面就把我的思路说一下： 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态，        1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。        1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的
jquery实现全选、全不选、反选效果
weixin_43186036的博客
04-27 263
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>6-5:复选框全选反选-1</title> <style> form{ width:300px; margin: 0 auto; ...
jquery 实现全选，全不选，反选，获取选中的值
12-19
综上所述，使用 jQuery 实现全选、全不选、反选以及获取选中值的功能是相当直观和简单的。通过绑定事件处理器，我们可以轻松地响应用户的交互，动态地更新页面状态。结合 HTML 结构和适当的 CSS 样式，可以创建出...
jquery实现全选、不选、反选的两种方法
11-25
在取复选框checkbox的属性checked属性值时，发现一个问题，就是当用attr取值时，真的为”checked”,假的为”undefined”;当用prop取值时，真的为”true”,假的为”false”。经过网上参考一些资料，及...全选、不选、
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:  $(function(){  $(“#checkedAll”).click(function(){  $(‘[name=items]:checkbox’)...
jquery全选反选全不选案例
04-04
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
微信小程序骨架屏
djjdjdjdjddjjdjd的博客
08-16 377
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 455
【代码】springboot网上商品订单转手系统bootpf
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 87
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
Vue :class 绑定可以结合多个判断维度来动态设置类
最新发布
u010865136的专栏
08-19 84
二、:class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"一、数组语法允许你根据条件动态添加多个类名。数组中的每个元素可以是一个类名的字符串，或者是一个对象。对象中的键是类名，值是布尔值。
Vue路由
程小白的博客
08-19 422
这样我们的路由信息就配置好了。但是有一个bug需要解决。当我们配置好路由信息后，重启项目，再次访问，会发现什么也不显示，这是因为当项目启动起来时默认访问的路由的路径是"/"而非“/dept”和"/emp",但是在配置路由时并没有配置“/”的路由，因此要再新配置一个“/"的路由信息。
jQuery实现全选、全不选和反选
06-07
可以使用以下代码来实现jQuery的全选、全不选和反选功能： ```javascript // 全选 $("#checkAll").click(function(){ $("input[type='checkbox']").prop("checked", true); }); // 全不选 $("#uncheckAll").click...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值