谁都知道 在html 如果一个复选框被选中 是 checked="checked"。

但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked

所以很多朋友判断  if($("#id").attr("checked")=="true") 这个是错误的，其实应该是 if($("#id").attr("checked")==true)

例子里面包括了一下几个功能。

<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="获得选中的所有值">

代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </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").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>

jQuery实现checkbox（复选框）选中、全选反选代码的更多相关文章

  1. 【jQuery】复选框的全选、反选，推断哪些复选框被选中

    本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...

  2. 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

    还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...

  3. jQuery学习(五)——使用JQ完成复选框的全选和全不选

    1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框 ...

  4. js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

  5. jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

    <!doctype html><html> <head> <meta charset="utf-8"> <title>j ...

  6. JQ实现复选框的全选反选不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Vue复选框的全选

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  8. js实现复选框的全选、全不选、反选

    js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...

  9. js实现复选框的全选、全不选和反选

    js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...

  10. js复选框实现全选、全不选、反选

    复选框为checkbox对象 通过input就可以将一个简单的复选框呈现在页面上 <input type="checkbox" /> 要实现的大概就是这样一个页面 思路 ...

随机推荐

  1. DB数据源之SpringBoot+MyBatis踏坑过程（六）mysql中查看连接，配置连接数量

    DB数据源之SpringBoot+MyBatis踏坑过程(六)mysql中查看连接,配置连接数量 liuyuhang原创,未经允许禁止转载 系列目录连接 DB数据源之SpringBoot+Mybati ...

  2. 在mac下运行 npm run eject 出现报错问题解决方法

    当使用create-react-app创建项目后,接着运行npm run eject时,如果出现下面的错误 可能是脚手架添加了.gitignore这个文件,但是没有本地仓库,可以使用以下代码解决这个问 ...

  3. GIT更新一其中一个提交版本

    有一小朋友刚才SVN转到GIT,最近老是咨询怎么才svn update -rXXXXX 在git其实也不麻烦,就是git checkout的事情,不管是分支还是TAG,都会有一个HASH版本号 1. ...

  4. Scala基本语法总结（一）

    Scala基本语法总结 时隔快一年了,又捡起scala,不是想学的有多么的精通,只是想把之前遇到的知识点和实践中遇到的重点进行归纳总结,对以后的面试或许有点帮助吧! 一.scala开发环境的配置 我这 ...

  5. 【Android】Android Studio真机调试的问题统整

    真机调试需要注意以下几个问题 [1]手机的USB调试需开启 [2]手机不能是仅充电模式,需要传输数据模式 [3]有些USB线会偷工减料,请拿一条没问题的线,例如买手机时原厂给的配线 [4]在PC端需要 ...

  6. python学习笔记：第21天 常用内置模块之collections和time

    目录 一.collections模块 二.时间模块 也可以在我的个人博客上阅读 一.collections模块 1. Counter Counter是⼀个计数器,主要⽤统计字符的数量,之前如果我们要统 ...

  7. ruby 爬虫爬取拉钩网职位信息，产生词云报告

    思路:1.获取拉勾网搜索到职位的页数 2.调用接口获取职位id 3.根据职位id访问页面,匹配出关键字 url访问采用unirest,由于拉钩反爬虫,短时间内频繁访问会被限制访问,所以没有采用多线程, ...

  8. 企业SVN版本管理与代码上线方案

    1.SVN服务实战 1) 什么是SVN(Subversion)? Svn(subversion)是近年来崛起的非常优秀的版本管理工具,与CVS管理工具一样,SVN是一个跨平台的开源的版本控制系统.Sv ...

  9. Zabbix 3.4.11监控 apache服务，ftp服务的配置

    一 zabbix 的安装部署 略 二监控 apache服务的配置 首先在本机下载模板:https://github.com/rdvn/zabbix-templates/archive/m aster. ...

  10. c语言中 *p++ 和 (*p)++ 有什么区别?以及C语言运算符的优先级。整理。

    *p++是指下一个地址. (*p)++是指将*p所指的数据的值加一. C编译器认为*和++是同优先级操作符,且都是从右至左结合的,所以*p++中的++只作用在p上,和*(p++)意思一样:在(*p)+ ...