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 相关文章推荐
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 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
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
Python中设置变量访问权限的方法
2015/04/27 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
解读! Python在人工智能中的作用
2017/11/14 Python
python模拟表单提交登录图书馆
2018/04/27 Python
一百行python代码将图片转成字符画
2021/02/19 Python
安装docker-compose的两种最简方法
2019/07/30 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
Opencv求取连通区域重心实例
2020/06/04 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
人事主管的岗位职责
2013/11/16 职场文书
体育之星事迹材料
2014/05/11 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
教师节横幅标语
2014/10/08 职场文书
个人合伙协议书范本
2014/10/14 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
JavaScript实现两个数组的交集
2022/03/25 Javascript
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技