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 相关文章推荐
jquery移动listbox的值原理及代码
May 03 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
对vuex中getters计算过滤操作详解
Nov 06 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
js实现橱窗展示效果
Jan 11 Javascript
react组件基本用法示例小结
Apr 27 Javascript
Vue实现购物车基本功能
Nov 08 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,ajax实现分页
2008/03/27 PHP
Wordpress php 分页代码
2009/10/21 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
php while循环控制的简单实例
2016/05/30 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Python bytes string相互转换过程解析
2020/03/05 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
毕业自我鉴定书
2014/03/24 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
演讲比赛主持词
2015/06/29 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
MySql数据库 查询时间序列间隔
2022/05/11 MySQL
MySQL存储过程及语法详解
2022/08/05 MySQL