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 相关文章推荐
动态刷新 dorado树的js代码
Jun 12 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
Node.js安装配置图文教程
May 10 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php 魔术函数使用说明
2010/02/21 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
VUE 使用中踩过的坑
2018/02/08 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
vue实现文字加密功能
2019/09/27 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
python 网络编程详解及简单实例
2017/04/25 Python
python中Apriori算法实现讲解
2017/12/10 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
如何进行有效的自我评价
2013/09/27 职场文书
入职担保书范文
2014/05/21 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
自荐信格式模板
2015/03/27 职场文书