谁都知道 在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. JS-类型相关

    typeof检测类型typeof 返回的数据类型种类:number(js不分整形,浮点等等 所有的数字都是number类型).string.boolean.undefined.object.funct ...

  2. java servlet数据库查询并将数据显示到jsp页面

    需要的jar包:mysql-connector-java.jar build path只是个jar包的引用,部署的时候想不丢包最好还是手动拷贝到对应项目的lib文件下. 在try{}中定义的变量为局部 ...

  3. 19-3-6Python中字典的解释、使用、嵌套

    一.字典 为什么学字典: 列表的缺点: 1.列表如果存储的数据比较多,那么他的查询速度相对慢. 2.列表存储的数据关联性不强. 字典是什么: Python基础数据类型之一:字典. Python中唯一的 ...

  4. .Net core 使用SSH.Net上传到SFTP服务器和和下载文件

    今天换了个服务器,文件上传到sftp服务器上了,那么ftp和sftp服务器有什么区别呢,正常来说sftp会更安全一些. 废话不多说,首先.net core 上传到sftp需要引入一个Nuget包,就是 ...

  5. C# 对象的深复制和浅复制

    2019年第一篇博客,好吧,又大了一岁了,继续加油吧. 正文: C# 中的对象,众所周知是引用类型,那么如何复制对象Object呢,我们来看看下面这段代码: public class User { p ...

  6. php 当不确定用户输入的是浮点 还是整数 还是字符串时

    $price = (floatval($price))?intval(floatval($price)*100)/100:0;

  7. Java并发编程：浅析几种线程安全模型 [转]

    多线程编程一直是老生常谈的问题,在Java中,随着JDK的逐渐发展,JDK提供给我们的并发模型也越来越多,本文摘取三例使用不同原理的模型,分析其大致原理.目录如下: 1.COW之CopyOnWrite ...

  8. C# WebBrowser获取指定字符串的坐标

    public void FindKeyWord(string keyWord) { WebBrowser wb = new WebBrowser(); foreach (HtmlElement ite ...

  9. 【laravel】passport的scope作用域

    1.根据作用域生成token $user->createToken($request->name,['test1'])->accessToken; 2.注册中间件 'scopes' ...

  10. Android 串口蓝牙通信开发Java版本

    Android串口BLE蓝牙通信Java版 0. 导语 Qt on Android 蓝牙通信开发 我们都知道,在物联网中,BLE蓝牙是通信设备的关键设备.在传统的物联网应用中,无线WIFI.蓝牙和Zi ...