谁都知道 在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. 从技术上分析八叉网www.xxxxxxxxvideos.com的自动定时发布文章功能是怎么实现的

    做网站开发的都需要用到网站广告自动定时发布功能,也就是说,编辑在网站后台把文章编写好之后,设置发布时间,点确定后发布,这时在网站前台访客是看不到这篇文章的,必须要等到文章设置的发布时间之后才能看到.八 ...

  2. 19-3-5Python中列表、元组、以及range

    一.列表: 为什么要学列表? 因为字符串存在缺点: 1)      只能存储少量的数据. 2)      数据类型无论索引.切片 获取的都是字符串类型,类型过于单一,转化成它原来的类型还需要进一步转换 ...

  3. FileBeats安装

    FileBeats安装 FileBeats官方下载链接: https://www.elastic.co/downloads/beats/filebeat 也可以直接使用以下命令下载(文章下载目录一概为 ...

  4. 【淘宝客】PHPMailer-v6.0.5版 发送邮件dome

    话不多说,根据官方dome修改下,官方更新地址:https://github.com/PHPMailer/PHPMailer <?php use PHPMailer\PHPMailer\PHPM ...

  5. asp.net在一般处理程序里面操作Session

    1.要在一般处理程序中获取其他页面的session值,需要引用名空间: using System.Web.SessionState; 2.然后继承一个接口:IRequiresSessionState ...

  6. MapReduce之Reduce Join

    一 介绍 Reduce Join其主要思想如下: 在map阶段,map函数同时读取两个文件File1和File2,为了区分两种来源的key/value数据对,对每条数据打一个标签(tag), 比如:t ...

  7. STM32F407+STemwin学习笔记之STemwin移植

    原文链接:http://www.cnblogs.com/NickQ/p/8748011.html 环境:keil5.20  STM32F407ZGT6  LCD(320*240)  STemwin:S ...

  8. ruby中url解码并替换非法字符

    url中中文字符解码 str = URI.decode(url_str) 替换非法字符 if ! str.valid_encoding? p str = str.encode("UTF-16 ...

  9. linux 下的torrent下载器qBitTorrent

    BT下载利器--Qbittorrent完全攻 Ubuntu使用命令安装qBittorrent的方法 源码下载

  10. Git项目管理

    参考 参考书籍 <git学习指南> 参考网站 https://git-scm.com/ Git局限性讨论 高复杂度 两张图看懂集中式版本管理系统和分布式管理系统的区别-集中式vs分布式 g ...