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 相关文章推荐
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
vue实现图片上传到后台
Jun 29 Javascript
vue实现图片按比例缩放问题操作
Aug 11 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源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
Using the TextRange Object
2006/10/14 Javascript
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
子页向父页传值示例
2013/11/27 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
python自定义类并使用的方法
2015/05/07 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
局域网定义和特性
2016/01/23 面试题
机电一体化大学生求职信
2013/11/08 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
社区工作者演讲稿
2014/05/23 职场文书
党委班子对照检查材料
2014/08/19 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
初婚初育证明范本
2015/06/18 职场文书