jQuery操作CheckBox的方法介绍(选中,取消,取值)


Posted in Javascript onFebruary 04, 2014
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
<HTML>   
 <HEAD>   
  <TITLE> New document.nbsp;</TITLE>   
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
    <SCRIPT LANGUAGE="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>   
  <SCRIPT LANGUAGE="javascript">   
  <!--   
   $("document.quot;).ready(function(){       $("#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="";   
    $("[name='checkbox'][checked]").each(function(){   
     str+=$(this).val()+""r"n";   
   //alert($(this).val());   
    })   
   alert(str);   
    })   
   })   
  //-->   
  </SCRIPT>   
 </HEAD>   
 <BODY>   
 <form name="form1" method="post" action="">   
   <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>  
Javascript 相关文章推荐
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
vue点击按钮实现简单页面的切换
Sep 08 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 #Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 #Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 #Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 #Javascript
jquery中get和post的简单实例
Feb 04 #Javascript
jquery中$.post()方法的简单实例
Feb 04 #Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 #Javascript
You might like
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php中的静态变量的基本用法
2014/03/20 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python批量下载图片的三种方法
2013/04/22 Python
Python的log日志功能及设置方法
2019/07/11 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
python读取xml文件方法解析
2020/08/04 Python
Django多数据库联用实现方法解析
2020/11/12 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
学校三节实施方案
2014/06/09 职场文书
党支部鉴定意见
2015/06/02 职场文书
2016年母亲节寄语
2015/12/04 职场文书
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL