jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码


Posted in Javascript onFebruary 21, 2014

jQuery判断checkbox(复选框)是否被选中:
if($("#id").attr("checked")==true)

jQuery实现checkbox(复选框)选中、全选/反选代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery如何判断checkbox(复选框)是否被选中以及全选、反选</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$("document").ready(function(){
 $("#all").click(function(){   
  if(this.checked){   
   $("input[name='checkbox']").each(function(){this.checked=true;});
   $("#btn1").attr("value","反选");   
  }else{   
   $("input[name='checkbox']").each(function(){this.checked=false;});   
   $("#btn1").attr("value","全选"); 
  }   
 }); $("#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="";
  //$("input:checkbox[name='checkbox']:checked").each(function(){//可以
  $("[name='checkbox'][checked]").each(function(){
   str+=$(this).val()+"\r\n";
  });
  alert(str);
 });
});

//-->
</script>
</head>
<body>
    <form name="form1" method="post" action="">
     <input type="checkbox" id="all" name="all">
        <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>
</body>
</html>
Javascript 相关文章推荐
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 #Javascript
jquery五角星评分插件示例分享
Feb 21 #Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 #Javascript
jquery自定义滚动条插件示例分享
Feb 21 #Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 #Javascript
利用Jquery实现可多选的下拉框
Feb 21 #Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 #Javascript
You might like
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
javascript FormatNumber函数实现方法
2008/12/30 Javascript
js查错流程归纳
2012/05/04 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
在Python中进行自动化单元测试的教程
2015/04/15 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
python遍历路径破解表单的示例
2020/11/21 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
财务人员个人求职信范文
2013/12/04 职场文书
顶岗实习接收函
2014/01/09 职场文书
小学开学典礼主持词
2014/03/19 职场文书
摄影展策划方案
2014/06/02 职场文书
数学教师求职信范文
2015/03/20 职场文书
2015年资料员工作总结
2015/04/25 职场文书
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android