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 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
jquery 插件学习(四)
Aug 06 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
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
WINXP下apache+php4+mysql
2006/11/25 PHP
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
JS跨域问题详解
2014/11/25 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
Vue.js用法详解
2017/11/13 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
Python运算符重载用法实例
2015/05/28 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
预备党员入党自我评价范文
2014/03/10 职场文书
本科生自荐信
2014/06/18 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
公务员个人考察材料
2014/12/23 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
公司2015年终工作总结
2015/05/26 职场文书
教师节老师寄语
2015/05/28 职场文书
python函数的两种嵌套方法使用
2022/04/02 Python
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL