jquery表单的全选，全不选和反选

最新推荐文章于 2018-09-09 09:37:24 发布
最新推荐文章于 2018-09-09 09:37:24 发布
阅读量578 收藏
点赞数
分类专栏： 自己
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fly_zjl/article/details/8748193
版权
<html>
<head>
<meta charset="utf8">
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script>
    $(function(){
        $("#checkAll").click(function(){
            $(":checkbox").attr("checked",true);
        });
        $("#checkno").click(function(){
            $(":checkbox").attr("checked",false);
        });
        $("#checkf").click(function(){
            $(":checkbox[name=item]").each(function(){
                $(this).attr("checked",!$(this).attr("checked"))
            });
        
        });
    
    })


</script>
</head>
<body>
    <form action="#" method="post">
        <input type="checkbox" name="item" value="篮球"/>篮球
        <input type="checkbox" name="item" value="足球"/>足球
        <input type="checkbox" name="item" value="保龄球"/>保龄球
        <input type="checkbox" name="item" value="高尔夫"/>高尔夫
        <input type="checkbox" name="item" value="乒乓球"/>乒乓球
        <input type="checkbox" name="item" value="羽毛球"/>羽毛球<br>
        <input type="button" id="checkAll" value="全选"/>
        <input type="button" id="checkno" value="全不选"/>
        <input type="button" id="checkf" value="反选"/>
</body>
</html>
zjl2674802
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Js实现复选框的全选、全不选反选功能代码实例
10-15
总结来说，通过JavaScript，我们可以轻松实现复选框的全选、全不选和反选功能，提高用户体验。在实际项目中，可以根据需求调整代码，比如增加更多的复选框，或者将这些功能封装成一个通用的函数，便于复用。同时，还...
jQuery实现表单全选、全不选以及反选的功能
lep的博客
06-22 4503
本文主要介绍了利用jQuery实现表单的全选、全不选以及反选的功能。对如下的form表单：<!-- HTML结构 --> <form id="test-form" action="test"> <legend>请选择想要学习的编程语言：</legend> <fieldset> <p><label class="selectAll"><input type="check
使用jQuery实现表单的全选、全不选、反选
愿记忆Tel一切安好
04-16 703
大家可以去网上下载jquery-1.4.2.min.js       $(function(){  //全选  $("#checkAll").click(function(){     $("input:checkbox").attr("checked",true);     });  //全不选  $("#checkNo").click(function(){
使用JQuery表单选择器,实现全选/全不选/和反选的效果
weixin_42152880的博客
09-09 1049
使用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实现全选、全不选和反选功能
热门推荐
林小米的博客
12-12 4万+
项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候，心想很简单的一个功能，几行代码就能搞定，然而事实并非如此。下面就把我的思路说一下： 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态，        1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。        1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的
jQuery实现复选框的全选和反选
10-20
接着，我们引入了 jQuery 库的外部链接，并定义了三个 JavaScript 函数，分别对应全选、全不选和反转功能： ```javascript <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"> // 全选 function...
jQuery实现复选框checkbox全选、反选功能.rar
07-10
本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`<input>`标签定义，类型为...
复选框全选、全不选和反选的效果实现.rar
07-05
本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript（JS）实现复选框的全选、全不选和反选功能，这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...
jquery Checkbox 全选 反选 全不选 多种实现方法
10-15
在网页开发中，jQuery 是一个广泛使用...通过以上介绍，我们可以利用 jQuery 实现复选框的全选、反选和全不选功能，同时结合表单验证插件，确保用户按照规定进行输入。在实际应用中，可以根据具体需求进行调整和优化。
用Jquery实现checkbox的反选、全选、全不选
阴慧超的博客
09-18 4万+
当我们在用JS来实现web端操作的时候，多选框的全选、全不选和反选是最常用的功能，尤其是当数据量大的时候就需要这样的批量操作来给用户带来方便、快捷的服务了。        下面我们就来用JQuery实现checkbox多选框的全选、全不选、反选的功能：         假设有4个checkbox多选框，他们包含在一个id=“chk”的div中，而全选、全不选、反选的button按钮所在标签的i
jq中最简单全选与全不选
qq_35641923的博客
02-26 3874
id换成对应按钮的id，class为对应input的class $(document).on('click','#id',function(){ if($(this).is(":checked")){ $('.class').prop('checked',true); }else{ $('.class').prop('checked',false...
php 分页、全选、反选、全不选、批量删除
chaojie2009的专栏
08-22 8746
<?php /** * 用户管理 * 2011/8/22 * kcj * * */ include "isLogin.php"; include "../conn/conn.php"; $sql="select * from user"; $rst=mysql_que
php练习题
赵江龙的专栏
06-17 1484
1. 变量如何定义？   $ 2. 如何检查变量是否定义？ isset() 3. 如何删除一个变量？ unset() 4. 判断一个变量是否为空的函数？ empty() 5. 什么是可变变量？ 获取一个普通变量的值作为这个可变变量的变量名。 6. php中变量有哪些基本数据类型？ php支持8种原始数据类型。 包括： 四种标量类型（布尔型boole
将封装的数据库类，改写成静态属性和方法来访问
赵江龙的专栏
04-24 816
class static_db{ private static $host; private static $username; private static $password; private static $db_name; private static $link; public function __construct($host,$username,$password,$d
静态属性
赵江龙的专栏
04-24 761
1，面向对象的编程中，我们可以通过对象访问方法和属性，还可以通过类来访问它的成员，这样的方法和属性就是静态的 2，定义类的静态属性,需要增加static关键字 3，静态属性可以在静态方法中访问，也可以在非静态方法中访问 4，类的每个实例都可以访问类中定义的静态方法,不能访问静态属性，因为静态属性属于类的
类的访问控制
赵江龙的专栏
04-24 692
对属性和方法的访问控制是通过在前面添加关键字： public，protected，private 来实现的 public  定义的类成员可以在任何地方被访问（类的内部和类的外部） protected  定义的类成员可以被其所在类的子类和父类访问（当然在当前类内也可以访问） private    定义的类成员只能被其所在类访问 尽量提高类 对 类成员的控制能力 如果能使用私有的成
jquery精简品牌列表
赵江龙的专栏
04-01 680
*{margin:0;padding:0}         body{font-size:15px;text-align:center}         .showLess{margin:auto;width:600px}         .showLess ul li{display:block;float:left;width:200px;line-height:30px}
jQuery实现全选、全不选和反选
最新发布
06-07
可以使用以下代码来实现jQuery的全选、全不选和反选功能： ```javascript // 全选 $("#checkAll").click(function(){ $("input[type='checkbox']").prop("checked", true); }); // 全不选 $("#uncheckAll").click(function(){ $("input[type='checkbox']").prop("checked", false); }); // 反选 $("#reverseCheck").click(function(){ $("input[type='checkbox']").each(function(){ $(this).prop("checked", !$(this).prop("checked")); }); }); ``` 其中，`#checkAll`、`#uncheckAll`、`#reverseCheck`是三个按钮的id，可以根据具体情况进行修改。`$("input[type='checkbox']")`则是选中所有的复选框。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值