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 相关文章推荐
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 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
常用星际术语索引(新手指南)
2020/03/04 星际争霸
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
PHP防盗链代码实例
2014/08/27 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
Python之循环结构
2019/01/15 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
Python中pass的作用与使用教程
2020/11/13 Python
python链表类中获取元素实例方法
2021/02/23 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
database面试题
2013/03/28 面试题
淘宝中秋节活动方案
2014/01/31 职场文书
2014年度培训工作总结
2014/11/27 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL