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中的取反再取反~~没有意义
Apr 06 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
javascript history对象详解
Feb 09 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 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面向对象法则
2012/02/23 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
php-msf源码详解
2017/12/25 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
python装饰器的特性原理详解
2019/12/25 Python
AUC计算方法与Python实现代码
2020/02/28 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
数控专业应届生求职信
2013/11/27 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
小学副班长竞选稿
2015/11/21 职场文书
2016小学新学期寄语
2015/12/04 职场文书
Redis批量生成数据的实现
2022/06/05 Redis