谁都知道 在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. Ubuntu16 安装Anaconda3+tensorflow cpu版

    打开火狐浏览器,下载anaconda安装包,网址:https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/?C=M&O=D 下载完成,到Do ...

  2. SpringBoot使用maven插件打包時報：[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/PluginExecutionException的處理方案

    SpringBoot使用maven插件打包時報:[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/PluginExec ...

  3. Django学习笔记4-csrf防护

    1.CSRF验证失败. 请求被中断. 原因是django为了在用户提交表单时防止跨站攻击所做的保护 什么是 CSRF CSRF, Cross Site Request Forgery, 跨站点伪造请求 ...

  4. SQL Server 2012 - 开窗函数

    -- 开窗函数:在结果集的基础上进一步处理(聚合操作) -- Over函数,添加一个字段显示最大年龄 SELECT * , MAX(StuAge) OVER ( ) MaxStuAge FROM db ...

  5. 分页插件pagehelper ，在sql server 中是怎么配置的

    <configuration> <plugins> <!-- com.github.pagehelper为PageHelper类所在包名 --> <plugi ...

  6. XSS攻击 && CSRF攻击 基础理解

    一个网站,不管多么的帅气,多么的风骚,如果你不安全,那始终都是一个弟弟啊~ 今天又看了下XSS和CSRF攻击的文章,我也想发点什么普及下大家的安全意识,毕竟作为一名拥有伟大梦想的程序员,基本的安全意识 ...

  7. yii 后台配置独立子域名方法

    我这里安装的是宝塔面板集成的环境WNMP,官网上虽然也有,但是写的并不明确,对我这种用YII的新手来说也很头疼,折腾了半天终于弄好,记录一下. 首先解析一个子域名:back.domain.com: 用 ...

  8. PHP7.1中使用openssl替换mcrypt

    PHP7.1中使用openssl替换mcrypt 在php开发中,使用mcrypt相关函数可以很方便地进行AES加.解密操作,但是PHP7.1中废弃了mcrypt扩展,所以必需寻找另一种实现.在迁移手 ...

  9. WIN10远程连接winserver2012 r2，连接失败

    背景:2012开启远程的时候,默认是勾选“仅允许运行使用网络级别身份验证的远程桌面的计算机连接”,这个选项据说比较安全,但是用win10远程的时候就报错,函数不受支持,最后通过修改win10的配置得以 ...

  10. Python学习笔记三：数据类型

    数据类型 整数int 32位机器,-2**31~2**31-1,即-2147483648~2147483647(4亿多) 64位机器,-2**63~2**63-1,非常大了. 长整型long 没有位数 ...