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 相关文章推荐
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
详解React之key的使用和实践
Sep 29 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
原生JS实现微信通讯录
Jun 18 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教程孙仲岳主讲
2008/01/07 PHP
php的一个简单加密解密代码
2014/01/14 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
python 域名分析工具实现代码
2009/07/15 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
2014年车间工作总结
2014/11/21 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
mysql创建存储过程及函数详解
2021/12/04 MySQL
python计算列表元素与乘积详情
2022/08/05 Python