jQuery实现复选框 全选、反选、全不选

最新推荐文章于 2024-04-17 09:12:12 发布
最新推荐文章于 2024-04-17 09:12:12 发布
阅读量104 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/liuyanmin/p/5146550.html
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>复选框全选/全不选/反选</title>
  <script type="text/javascript" src="jquery-1.11.1.js"></script>
  <script type="text/javascript"> 
  /**
   * 全选
   * 
   * checkboxName 复选框的name
   */
   function allCkb(checkboxName){
     $('[name='+items+']:checkbox').each(function (){
    	 this.checked = true;
     });
  }
  /**
   * 全不选
   * 
   */
  function unAllCkb(){
     $('[type=checkbox]:checkbox').attr('checked', false);
  }
  /**
   * 反选
   * 
   * checkboxName 复选框的name
   */
  function inverseCkb(checkboxName){
     $('[name='+items+']:checkbox').each(function(){
     this.checked=!this.checked;
     });
  }
  </script>
 </head>
 
 <body>
	<input type="button" οnclick="allCkb('hobby')" value="全　选"/>
	<input type="button" οnclick="unAllCkb()" value="全不选"/>
	<input type="button" οnclick="inverseCkb('hobby')" value="反　选"/><br/> 
	<input type='checkbox' name='hobby' value="0"/>踢足球<br/>
	<input type='checkbox' name='hobby' value="1"/>打网球<br/>
	<input type='checkbox' name='hobby' value="2"/>游泳<br/>
	<input type='checkbox' name='hobby' value="3"/>射击<br/><br/>
 </body>
</html>



转载于:https://www.cnblogs.com/liuyanmin/p/5146550.html

weixin_30932215
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery复选框实现全选、单选
work hard
05-19 4344
jQuery实现checkbox的全选、单选、反选功能 逻辑（见http://blog.csdn.net/hardwin/article/details/7668989）： 1. 全选的checkbox选中时，子checkbox全部选中。反之，全部不选 2.子checkbox中，只要有没有被选中的，取消全选checkbox的选中 3.子checkbox的数量和子checkbox
JQuery 实现复选框全选反选功能
LOVE_HopeOne的博客
08-01 683
  HTML部分 &lt;body&gt; &lt;input type="checkbox" name="fu"&gt;全选(父)&lt;br&gt; &lt;input type="checkbox" name="zi"&gt;子1&lt;br&gt; &lt;input type="checkbox" name=
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:         $(function(){             $(“#checkedAll”).click(function(){                 $(‘[name=items]:checkbox’).attr(‘checked’,true);             });             $(“#checkedNo”).click(function(){                 $(‘[name=items]:ch
jQuery模糊匹配checkbox全选 value实现checkbox部分或全部全选
wpydaguan的专栏
05-21 1949
本文章总结jQuery实现checkbox三种情况的全选功能 第一种：等值全选，也称name的等值全选，通过checkbox的名称name实现。 第二种：模糊全选，也称id模糊全选，通过checkbox的id或value值实现。 第三种：值范围全选，也称value值范围全选，通过checkbox的value值实现，或者截取id数字后缀范围判断实现。 等值全选 在工作中
复选框实现单选、全选、全不选、以及给复选框中全选框设置Jquery事件
weixin_54185409的博客
05-20 1417
以上的难点在于不仅要为“全选”框checkbox添加监听事件，也要监听每个爱好的被选中状态。别忘记引用Jquery。
jQuery实现复选框全选，全不选，反选功能
weixin_48747169的博客
03-23 2373
index.jsp <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html> <html> <head> <title>Title</title> <script type="text/javascript" src="JS/jquery-3.6.0.min.js"></script&g
jquery实现checkbox的单选和全选
hu531035580的博客
04-03 724
<input type="checkbox" name="all">全选</th><th>用户名</th><th>昵称</th><th>邮箱</th><th>角色</th><th>操作
基于jquery实现复选框全选，反选，全不选等功能
11-26
在本篇文章中，我们将探讨如何利用 jQuery 来实现复选框的全选、反选和全不选等功能。这些功能在各种用户界面中都非常常见，例如在批量操作列表项或进行多选项选择时。 首先，让我们回顾一下示例中的 HTML 结构，它...
jquery复选框CHECKBOX全选、反选
01-19
使用方法:我们先把下面的JS保存为有个文件,到时候调用，淡然你也可以直接写在页面内,推荐使用前者,方便重用: 代码如下:(function($){ $.fn.checkgroup = function(options){ //merge settings settings=$.extend({ ...
JQuery实现列表中复选框全选反选功能封装(推荐)
10-21
在做列表时经常会遇到全选，反选进行批量处理问题。通过本文给大家介绍JQuery实现列表中复选框全选反选功能封装，对jq复选框全选反选功能感兴趣的朋友一起看看吧
jQuery-全选/全部选/反选
heliuerya的博客
05-25 1487
input type="checkbox" name="items" value="羽毛球" />羽毛球。<input type="checkbox" name="items" value="乒乓球" />乒乓球。<input type="checkbox" name="items" value="足球" />足球。<input type="checkbox" name="items" value="篮球" />篮球。//全选/全部选复选框的状态也变成选中状态。//所有复选框的状态都变成选中状态。
jQuery实现checkbox全选功能
KobeSacre的博客
03-10 1288
// 实现全选功能 $("#summaryBox").click(function() { // 查看当前全选是否被选中 var status = this.checked; // 根据status来设置其他多选框的状态 $(".itemBox").prop("checked", status); }); // 当本页所有用户被选中时，全选会自动选中 $("#rolePageBody").on("click", ".itemBox", funct
JQ checkbox 全选和全不选
一直专注于互联网
11-10 266
下面就介绍如何用一句话搞定全选功能 &lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="box"&gt; &
一行jQuery代码搞定checkbox 全选和全不选
合格程序猿
04-01 292
让复选框全部选中和全部取消是比较常用的；下面就介绍如何用一句话搞定全选功能；
jquery实现全选、反选、取消全部等操作(复选框checkbox)
最新发布
m0_61549984的博客
04-17 1519
this.checked){//一旦有一个未选中，则全选按钮 设置不选中。//将全选框的checked属性设置为false，也就是不选中全选框。//当前控件是选中的则设置为不选中，当前控件未选中的则设置为选中。$(this).parent().parent()是祖父节点tr。//选择class="userid"的控件，设置全部都不选中。//选择class="userid"的控件，让全部都选中。//选择class="userid"的控件，并执行循环。//选择class="userid"的控件。
jQuery实现全选和反选功能
qq_50587303的博客
01-23 958
使用jquery实现全选和全不选,反选
jquery实现复选框全选、反选
姚家威的博客
05-18 2928
HTML: <input id="all" type="checkbox" value="" /> <label for="all">全选</label> <input id="fan" type="checkbox" value="" /> <label for="fan">反选</label> <button id="getValue">获得所有选中值</button> <ul class="lis
用jQuery实现复选框全选、反选与获取选中的复选框的值
lzy_55的博客
08-29 1903
和js实现的步骤一样，先是实现全选，再是反选，最后创建函数，储存已选中的反选框的值再在全选反选中调用函数。用jQuery实现以上效果要比js简单的多。
08-jQuery-实现全选和全不选操作
记录java学习日常~
05-24 734
如果有一个未被选中，则不是全部选中，将全选的 checkbox 取消选中；否则全部选中，将全选的 checkbox 选中。这里使用了 prop() 方法来设置 checkbox 的 checked 属性，如果全选的 checkbox 被选中了，则将所有的水果 checkbox 都选中，否则都不选中。然后，我们还可以添加一个点击事件来监测所有的水果 checkbox 是否全部被选中，如果是，则自动将全选的 checkbox 选中，否则不选中。
jquery复选框全选和反选
11-29
以下是jQuery实现复选框全选和反选的代码示例： 1. 全选 ```javascript //全选按钮 $("#checkedAllBtn").click(function(){ //所有复选框的状态都变成选中状态 items.prop("checked",true); //全选/全部选复选...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值