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 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
javascript表单验证大全
Aug 12 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 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+JS实现大规模数据提交的方法
2015/07/02 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
javascript 函数式编程
2007/08/16 Javascript
$.ajax json数据传递方法
2008/11/19 Javascript
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
详解python之配置日志的几种方式
2017/05/22 Python
Python实现基于POS算法的区块链
2018/08/07 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
数据库专业英语
2012/11/30 面试题
毕业生自荐书模版
2014/01/04 职场文书
学校联谊活动方案
2014/02/15 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
作风年建设汇报材料
2014/08/14 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
2015年科普工作总结
2015/07/23 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python