Jquery 实现全选全不选功能

最新推荐文章于 2023-05-24 12:38:44 发布
最新推荐文章于 2023-05-24 12:38:44 发布
阅读量434 收藏 1
点赞数 4
分类专栏： web端 文章标签： Jquery 全选 全不选
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wk_beicai/article/details/78516642
版权
<!DOCTYPE html>
<html>


<head>
<meta charset="UTF-8">
<title>attr</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
</head>


<body>
<form action="" method="post">


<p>爱好选择</p>
<p>
<lable>
<input type="checkbox" />篮球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />足球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />乒乓球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />游泳
</lable>
</p>
<p>
<lable>
<input type="checkbox" />羽毛球
</lable>
</p>
</form>
<p>
<button id="all">全选</button>
<button id="notall">全不选</button>
<button id="unall">反选</button>
<button id="ok">ok</button>
</p>
<hr />
<div class="info">

</div>
</body>
<script type="text/javascript">
$("#all").click(function(){
$(":checkbox").attr({'checked':true});
});
$("#notall").click(function(){
$(":checkbox").attr({'checked':false});
});
$("#unall").click(function(){
$(":checkbox").each(function(){
this.checked=!this.checked;
});
});
$("#ok").click(function(){
$(":checked").parent().parent().appendTo(".info");
})
</script>
</html>
别碰我的IDEA
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery实现全选、全不选、反选功能
12-12
JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态， 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的所有子复选框时，'全选'按钮应该是'选中'状态。 3、点点击'全不选'按钮时，当前页面的所有复选框置为非选中状态。 4、当点击'反选'按钮时，当前页面选中状态的复选框置为未选中状态，未选中状态的复选框置为选中状态。
Jquery实现全选全不选
qq_46112274的博客
01-10 1938
$(function(){ // 1、全选 全不选功能模块 //就是把全选按钮(checkall)的状态赋值给 三个小的按钮(j-checkbox)就可以了 // 事件可以使用change $(".checkall").change(function(){ // console.log($(this).prop("checked")); $(".j-checkbox, .checkall").prop("checked",$(this).pr.
JQUERY实现全选全不选
结贴人的博客
11-18 541
最近遇到要做一个checkbox做全选和全不选的的东东，查了一些资料，写了一个小列子script type="text/javascript"> 全选或者全不选 --> function allselect(){ if(!$("#selectAll").is(':checked')){ $("#treeTable :checkbox
jquery 实现全选全不选
weixin_38114235的博客
05-08 145
$("#checkedAll").click(function() {     if($(this).is(":checked")){ $("input[name='select-goods']").prop("checked",true);     }else{ $("input[name='select-goods']").prop("checked",false);     }
jQuery实现Checkbox中项目开发全选全不选的使用
Biexiansheng的博客
04-19 452
1 2 3 4 Checkbox的练习 5 6 *{margin:0px;padding:0px;} 7 table{width:100%;text-align:center;} 8 9 10 11 12 $(function(){ 13 //给全选的复选框添加事件 14
jQuery实现CheckBox全选、全不选功能
10-20
// 全选/全不选功能 $("#checkAll").click(function() { $('input[name="subBox"]').prop("checked", this.checked); }); // 监听子Checkbox的点击事件，动态更新全选Checkbox的状态 var $subBox = $("input...
jquery实现全选和全不选功能效果的实现代码【推荐】
10-22
首先，文章标题中提到的“jquery实现全选和全不选功能效果的实现代码”暗示我们将要探讨的是如何通过jQuery这个流行的JavaScript库来控制复选框（checkbox）的选中状态。jQuery是一个快速、小巧且功能丰富的...
jquery实现checkbox全选全不选的简单实例
10-26
通过本文所提供的实例，我们可以了解到使用jQuery实现复选框全选全不选功能的基本原理和实现方法。在实际项目中，根据需求进行相应的调整和优化。掌握这些知识点，能够帮助开发者在web开发中更好地处理用户交互和...
jquery实现全选、全不选以及单选功能
10-20
本文将深入探讨使用jQuery实现全选、全不选以及单选功能的代码实现方法。首先，需要了解的是jQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历和事件处理、动画和Ajax交互，使Web开发更为方便...
jquery实现全选/全不选功能
weixin_47382783的博客
08-20 1109
通常情况下，需要根据界面的复选框完成一个全选的功能，如何实现可以看注释，代码如下： <html> <head> <meta charset="utf-8"> <title>jquery实现全选/全不选</title> <!-- 引入jquery --> <script src="../js/jquery-3.5.1.js"></script&...
用jquery实现全选/全不选效果
youngerhao的专栏
03-26 741
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  http://www.w3.org/1999/xhtml">      无标题文档        $(document).ready(function(){     $("#all-yes").click(function(){
jQuery实现 全选/全不选
zhanyouwen的博客
06-04 625
jQuery实现 全选/全不选
jQuery实现全选和全不选
ahao4311的博客
02-20 141
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-2.1.0.min.js"></s...
利用jQuery实现全选全不选反选
z . s . j
04-01 937
$(function(){  //全选  $("#checkAll").click(function(){     $(":checkbox").attr("checked",true);  });    //全不选  $("#checkNo").click(function(){     $(":checkbox").attr("checked",false);  });
jQuery--全选全不选功能
qq_52567967的博客
09-30 482
【代码】jQuery--全选全不选功能。
jquery实现全选和全不选功能
热门推荐
php菜鸟技术天地
09-13 1万+
无标题文档     $(document).ready(function () {         $("#checkedAll").click(function () {             //alert("aa");             if ($(this).attr("checked")) { // 全选
用jquery来实现checkbox的全选与全不选
qq_42209630的博客
05-16 2659
HTML结构:&lt;ul&gt; &lt;li&gt; &lt;input type="checkbox" class="thead"&gt;全选或全不选 &lt;/li&gt; &lt;li&gt; &lt;ol&gt; &lt;li&g
08-jQuery-实现全选和全不选操作
记录java学习日常~
05-24 763
如果有一个未被选中，则不是全部选中，将全选的 checkbox 取消选中；否则全部选中，将全选的 checkbox 选中。这里使用了 prop() 方法来设置 checkbox 的 checked 属性，如果全选的 checkbox 被选中了，则将所有的水果 checkbox 都选中，否则都不选中。然后，我们还可以添加一个点击事件来监测所有的水果 checkbox 是否全部被选中，如果是，则自动将全选的 checkbox 选中，否则不选中。
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、付费专栏及课程。

余额充值