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 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
jquery+Jscex打造游戏力度条
Sep 12 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
Vue 过滤器filters及基本用法
Dec 26 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
聊天室php&amp;mysql(二)
2006/10/09 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
jquery获取input表单值的代码
2010/04/19 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
python实现两张图片的像素融合
2019/02/23 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
客房主管岗位职责
2013/12/09 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
保险内勤岗位职责
2015/04/13 职场文书
药店营业员岗位职责
2015/04/14 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
深入浅析Django MTV模式
2021/09/04 Python
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL