jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码


Posted in Javascript onFebruary 21, 2014

jQuery判断checkbox(复选框)是否被选中:
if($("#id").attr("checked")==true)

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery如何判断checkbox(复选框)是否被选中以及全选、反选</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$("document").ready(function(){
 $("#all").click(function(){   
  if(this.checked){   
   $("input[name='checkbox']").each(function(){this.checked=true;});
   $("#btn1").attr("value","反选");   
  }else{   
   $("input[name='checkbox']").each(function(){this.checked=false;});   
   $("#btn1").attr("value","全选"); 
  }   
 }); $("#btn1").click(function(){
  $("[name='checkbox']").attr("checked",'true');//全选
 });
 $("#btn2").click(function(){
  $("[name='checkbox']").removeAttr("checked");//取消全选
 });
 $("#btn3").click(function(){
  $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
 });
 $("#btn4").click(function(){
  $("[name='checkbox']").each(function(){
   if($(this).attr("checked"))
   {
    $(this).removeAttr("checked");
   }else{
    $(this).attr("checked",'true');
   }
  });
 });
 $("#btn5").click(function(){
  var str="";
  //$("input:checkbox[name='checkbox']:checked").each(function(){//可以
  $("[name='checkbox'][checked]").each(function(){
   str+=$(this).val()+"\r\n";
  });
  alert(str);
 });
});

//-->
</script>
</head>
<body>
    <form name="form1" method="post" action="">
     <input type="checkbox" id="all" name="all">
        <input type="button" id="btn1" value="全选">
        <input type="button" id="btn2" value="取消全选">
        <input type="button" id="btn3" value="选中所有奇数">
        <input type="button" id="btn4" value="反选">
        <input type="button" id="btn5" value="获得选中的所有值">
        <br />
        <input type="checkbox" name="checkbox" value="checkbox1">checkbox1
        <input type="checkbox" name="checkbox" value="checkbox2">checkbox2
        <input type="checkbox" name="checkbox" value="checkbox3">checkbox3
        <input type="checkbox" name="checkbox" value="checkbox4">checkbox4
        <input type="checkbox" name="checkbox" value="checkbox5">checkbox5
        <input type="checkbox" name="checkbox" value="checkbox6">checkbox6
        <input type="checkbox" name="checkbox" value="checkbox7">checkbox7
        <input type="checkbox" name="checkbox" value="checkbox8">checkbox8
    </form>
</body>
</html>
Javascript 相关文章推荐
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
js中substring和substr的定义和用法
May 05 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 #Javascript
jquery五角星评分插件示例分享
Feb 21 #Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 #Javascript
jquery自定义滚动条插件示例分享
Feb 21 #Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 #Javascript
利用Jquery实现可多选的下拉框
Feb 21 #Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 #Javascript
You might like
浅谈PHP语法(1)
2006/10/09 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
php 中的closure用法详解
2017/06/12 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
js实现返回顶部效果
2017/03/10 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
给校长的建议书
2014/03/12 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
入党函调证明材料
2014/12/24 职场文书
优秀大学生申请书
2019/06/24 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python