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 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
Exjs 入门篇
Apr 07 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
webpack 模块热替换原理
Apr 09 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
node实现简单的增删改查接口实例代码
Aug 22 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 开发环境配置(Zend Server安装)
2010/04/28 PHP
PHP可变函数学习小结
2015/11/29 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
python 回调函数和回调方法的实现分析
2016/03/23 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
Eclipse面试题
2014/03/22 面试题
介绍一下常见的木马种类
2014/11/15 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
广播体操比赛口号
2014/06/10 职场文书
党员自评材料范文
2014/12/17 职场文书
如何写辞职书
2015/02/26 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android