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 相关文章推荐
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 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记录代码执行时间(实现代码)
2013/07/05 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
js中let和var定义变量的区别
2018/02/08 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
python批量提取word内信息
2015/08/09 Python
python实现红包裂变算法
2016/02/16 Python
Django日志模块logging的配置详解
2017/02/14 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
学生档案自我鉴定
2013/10/07 职场文书
物流专业大学生求职信范文
2013/10/28 职场文书
个人求职信范文分享
2014/01/31 职场文书
日语专业求职信
2014/07/04 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书