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 相关文章推荐
jQuery的基本概念与高级编程
May 14 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
js实现日历与定时器
Feb 22 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
dedecms模版制作使用方法
2007/04/03 PHP
PHP 彩色文字实现代码
2009/06/29 PHP
php错误级别的设置方法
2013/06/17 PHP
php反射应用示例
2014/02/25 PHP
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
node.js域名解析实现方法详解
2019/11/05 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
Python列表append和+的区别浅析
2015/02/02 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
Python: 传递列表副本方式
2019/12/19 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
华三通信H3C面试题
2015/05/15 面试题
个人简历自我鉴定
2013/10/11 职场文书
办公室主任岗位职责
2013/11/08 职场文书
公司总经理岗位职责
2014/03/15 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
初中体育课教学反思
2016/02/16 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL