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 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
原生JS实现音乐播放器
Jan 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
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python中的localtime()方法使用详解
2015/05/22 Python
python自动裁剪图像代码分享
2017/11/25 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
C#基础面试题
2016/10/17 面试题
个人简历的自荐信
2013/10/23 职场文书
会计学个人自荐信模板
2013/12/13 职场文书
教师对学生的寄语
2014/04/03 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
社区好人好事材料
2014/12/26 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
公司酒会致辞
2015/07/30 职场文书