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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
JS 页面自动加载函数(兼容多浏览器)
May 18 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
jQuery中的select操作详解
Nov 29 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
django如何自己创建一个中间件
2019/07/24 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
后勤采购员岗位职责
2013/12/19 职场文书
销售业务员岗位职责
2014/01/29 职场文书
最美护士演讲稿
2014/08/27 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
谢师宴学生致辞
2015/07/27 职场文书
初中体育教学随笔
2015/08/15 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
二年级作文之动物作文
2019/11/13 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis