JQuery选中checkbox方法代码实例(全选、反选、全不选)


Posted in Javascript onApril 27, 2015

1、checkbox list选择

JQuery选中checkbox方法代码实例(全选、反选、全不选)

代码:

<!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">
  <title></title>
  <script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      // 全选
      $("#btnCheckAll").bind("click", function () {
        $("[name = chkItem]:checkbox").attr("checked", true);
      });
 
      // 全不选
      $("#btnCheckNone").bind("click", function () {
        $("[name = chkItem]:checkbox").attr("checked", false);
      });
 
      // 反选
      $("#btnCheckReverse").bind("click", function () {
        $("[name = chkItem]:checkbox").each(function () {
          $(this).attr("checked", !$(this).attr("checked"));
        });
      });
 
      // 全不选
      $("#btnSubmit").bind("click", function () {
        var result = new Array();
        $("[name = chkItem]:checkbox").each(function () {
          if ($(this).is(":checked")) {
            result.push($(this).attr("value"));
          }
        });
 
        alert(result.join(","));
      });
    });
  </script>
</head>
<body>
  <div>
    <input name="chkItem" type="checkbox" value="今日话题" />今日话题
    <input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点
    <input name="chkItem" type="checkbox" value="财经" />财经
    <input name="chkItem" type="checkbox" value="汽车" />汽车
    <input name="chkItem" type="checkbox" value="科技" />科技
    <input name="chkItem" type="checkbox" value="房产" />房产
    <input name="chkItem" type="checkbox" value="旅游" />旅游
  </div>
  <div>
    <input id="btnCheckAll" type="button" value="全选" />
    <input id="btnCheckNone" type="button" value="全不选" />
    <input id="btnCheckReverse" type="button" value="反选" />
    <input id="btnSubmit" type="button" value="提交" />
  </div>
</body>
</html>

2、checkbox table选中

效果图:

JQuery选中checkbox方法代码实例(全选、反选、全不选)

<!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">
  <title></title>
  <style type="text/css">
    table
    {
      border-collapse: collapse;
    }
    td
    {
      border: 1px solid #ccc;
    }
  </style>
  <script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      // chkAll全选事件
      $("#chkAll").bind("click", function () {
        $("[name = chkItem]:checkbox").attr("checked", this.checked);
      });
 
      // chkItem事件
      $("[name = chkItem]:checkbox").bind("click", function () {
        var $chk = $("[name = chkItem]:checkbox");
        $("#chkAll").attr("checked", $chk.length == $chk.filter(":checked").length);
      })
    });
  </script>
</head>
<body>
  <table id="tb">
    <thead>
      <tr>
        <td>
          <input id="chkAll" type="checkbox" />
        </td>
        <td>
          分类名称
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input name="chkItem" type="checkbox" value="今日话题" />
        </td>
        <td>
          今日话题
        </td>
      </tr>
      <tr>
        <td>
          <input name="chkItem" type="checkbox" value="视觉焦点" />
        </td>
        <td>
          视觉焦点
        </td>
      </tr>
      <tr>
        <td>
          <input name="chkItem" type="checkbox" value="财经" />
        </td>
        <td>
          财经
        </td>
      </tr>
      <tr>
        <td>
          <input name="chkItem" type="checkbox" value="汽车" />
        </td>
        <td>
          汽车
        </td>
      </tr>
      <tr>
        <td>
          <input name="chkItem" type="checkbox" value="科技" />
        </td>
        <td>
          科技
        </td>
      </tr>
      <tr>
        <td>
          <input name="chkItem" type="checkbox" value="房产" />
        </td>
        <td>
          房产
        </td>
      </tr>
      <tr>
        <td>
          <input name="chkItem" type="checkbox" value="旅游" />
        </td>
        <td>
          旅游
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Javascript 相关文章推荐
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
js倒计时简单实现代码
Aug 11 Javascript
清除输入框内的空格
Dec 21 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
jquery简单的弹出层浮动层代码
Apr 27 #Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 #Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 #Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 #Javascript
使用console进行性能测试
Apr 27 #Javascript
浅谈javascript实现八大排序
Apr 27 #Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 #Javascript
You might like
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
PHP可变函数学习小结
2015/11/29 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
Python pickle模块用法实例
2015/04/14 Python
python实现ID3决策树算法
2017/12/20 Python
python中logging包的使用总结
2018/02/28 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
python实现贪吃蛇小游戏
2020/03/21 Python
python对象与json相互转换的方法
2019/05/07 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
python 制作网站小说下载器
2021/02/20 Python
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
教师应聘个人求职信
2013/12/10 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
收银员岗位职责
2015/02/03 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python