jQuery对checkbox的各种操作

2023-05-16

//注意: 操作checkbox的checked,disabled属性时jquery1.6以前版本用attr,1.6以上(包含)建议用prop

    //1、根据id获取checkbox

    $("#cbCheckbox1");

    //2、获取所有的checkbox

    $("input[type='checkbox']");//or

    $("input[name='cb']");

    //3、获取所有选中的checkbox

    $("input:checkbox:checked");//or

    $("input:[type='checkbox']:checked");//or

    $("input[type='checkbox']:checked");//or

    $("input:[name='ck']:checked");

    //4、获取checkbox值

name=222,name的值

    //用.val()即可,比如:

    $("#cbCheckbox1").val();

    //5、获取多个选中的checkbox值

    var vals = [];

    $('input:checkbox:checked').each(function (index, item) {

        vals.push($(this).val());

    });

     

    //6、判断checkbox是否选中(jquery 1.6以前版本 用  $(this).attr("checked"))

    $("#cbCheckbox1").click(function () {

        if ($(this).prop("checked")) {

            alert("选中");

        else {

            alert("没有选中");

        }

    });


$(this).is(":checked"):
true选中,
false没选中。  

    //7、设置checkbox为选中状态

    $('input:checkbox').attr("checked"'checked');//or

    $('input:checkbox').attr("checked"true);

    //8、设置checkbox为不选中状态

    $('input:checkbox').attr("checked"'');//or

    $('input:checkbox').attr("checked"false);

    //9、设置checkbox为禁用状态(jquery<1.6用attr,jquery>=1.6建议用prop)

    $("input[type='checkbox']").attr("disabled""disabled");//or

    $("input[type='checkbox']").attr("disabled"true);//or

    $("input[type='checkbox']").prop("disabled"true);//or

    $("input[type='checkbox']").prop("disabled""disabled");

    //10、设置checkbox为启用状态(jquery<1.6用attr,jquery>=1.6建议用prop)

    $("input[type='checkbox']").removeAttr("disabled");//or

    $("input[type='checkbox']").attr("disabled"false);//or

    $("input[type='checkbox']").prop("disabled""");//or

    $("input[type='checkbox']").prop("disabled"false);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery.js"></script>
</head>

<body>
  <h3>jQuery操作checkbox
  </h3>
  <input type="checkbox" id="cbCheckbox1" value="1" />
  <input type="checkbox" value="2" />
  <input type="checkbox" disabled="disabled" value="3" />
  <input type="checkbox" value="4" />
  <input type="checkbox" disabled="true" value="5" />
  <br />
  <input type="button" id="btnDisabled" value="禁用" onclick="fn_disabled();" />
  <input type="button" id="Button1" value="启用" onclick="fn_enable();" /><br />
  <input type="button" id="Button2" value="获取选中的值" onclick="getCheckedValues();" /><br />
  <input type="button" id="Button3" value="选中第二个" onclick="checkedSecond();" />
  <input type="button" id="Button4" value="取消选中第二个" onclick="uncheckedSecond();" /><br />
  <script type="text/javascript">

    function fn_disabled() {
      //$("input[type='checkbox']").attr("disabled", "disabled");
      //$("input[type='checkbox']").attr("disabled", true);
      $("input[type='checkbox']").prop("disabled", true);
      //  $("input[type='checkbox']").prop("disabled", "disabled");
    }

    function fn_enable() {
      //  $("input[type='checkbox']").removeAttr("disabled");
      // $("input[type='checkbox']").attr("disabled", false);
      // $("input[type='checkbox']").prop("disabled","");
      $("input[type='checkbox']").prop("disabled", false);
    }

    //获取选中的 checkbox的值
    function getCheckedValues() {
      var arr = [];
      $("input[type='checkbox']:checked").each(function (index, item) {//
        arr.push($(this).val());
      });
      alert(arr);
    }

    function checkedSecond() {
      // $("input[type='checkbox']:eq(1)").prop("checked", "checked");
      $("input[type='checkbox']:eq(1)").prop("checked", true);
    }

    function uncheckedSecond() {
      //  $("input[type='checkbox']:eq(1)").prop("checked", "");
      $("input[type='checkbox']:eq(1)").prop("checked", false);
    }

    $("#cbCheckbox1").click(function () {
      if ($(this).prop("checked")) {//jquery 1.6以前版本 用  $(this).attr("checked")
        alert("选中");
      } else {
        alert("没有选中");
      }
    });

  </script>
</body>

</html>

click获取的是点击结束后的数据。

attr不行,用prop

//选中复选框为true,没选中为false

$("input[type='checkbox']").prop("checked"); 获取值

$("input[type='checkbox']").prop("checked", false); 设置值

jQ 复选框 checkbox各种操作_大洋PHP的博客-CSDN博客_jq 勾选checkbox1、是否选中 prop(name|properties|key,value|fn) 获取在匹配的元素集中的第一个元素的属性值//选中复选框为true,没选中为false$(&quot;input[type='checkbox']&quot;).prop(&quot;checked&quot;);2、全选和全不选//选中所有页面上的复选框$(&quot;input[type='checkbox']&https://blog.csdn.net/eddy23513/article/details/81030750

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery对checkbox的各种操作 的相关文章

  • loki部署

    官方最佳示例 xff1a Best practices Grafana Loki documentation helm repo add loki https grafana github io loki charts helm repo
  • C++中的string与char数据类型以及路径字符串拼接以及写txt文件的问题

    作为一个计算机小白 xff0c 最近学习C 43 43 xff0c 这里做一个小记录 xff0c 欢迎各路大神共同交流 分割线 C 43 43 中string与char的区别 xff1a 在C 43 43 中 xff0c 字符串有两种 xf
  • 计蒜客救援问题 java

    救生船从大本营出发 xff0c 营救若干屋顶上的人回到大本营 xff0c 屋顶数目以及每个屋顶的坐标和人数都将由输入决定 xff0c 求出所有人都到达大本营并登陆所用的时间 在直角坐标系的原点是大本营 xff0c 救生船每次从大本营出发 x
  • 在keil中观察STM32产生的PWM 用示波器观察实质频率与仿真不符 是计算值的10倍(疑惑中。。。)

    第一步 xff1a 选择软件仿真 1 配置软件仿真 第二步 xff1a 进入仿真 xff0c 调用logicc analyer 观察波形 1 按仿真按键进入仿真界面 2 打开模拟 示波器 界面 3 设置观察端口 4 开始仿真 全速运行 5
  • 工厂模式——简单工厂、工厂方法、抽象工厂入门及总结

    背景 相信我们很多开发人员 xff0c 在平时的系统开发过程中 xff0c 都或多或少等接触过一些设计模式 比如java程序员必须会接触到的Spring类库 xff0c 它就综合运用了多种设计模式 xff0c 从而使源码更加抽象 xff0c
  • IDEA插件开发-学习

    IDEA插件资料其实挺少的 xff0c 可能我姿势不对 闲暇无事 xff0c 当作练手 这东西挺难调试的 xff0c 官方文档实在看不下去 xff0c 谷歌资料也挺少的 把下面这些东西复制进去可以当调试用了 Project project
  • 树莓派 通过opencv 调用csi摄像头

    树莓派使用csi摄像头 在设置里面打开摄像头 检测摄像头 安装opencv 读取图像测试 socket 网络传图测试 opencv多线程 取图测试 在设置里面打开摄像头 span class token function sudo span
  • Centos7.2下安装Pyspider

    本来一直使用的python3 X的 xff0c 之前一直弄的Python3 6 1 xff0c 不知道为啥 xff0c 搭建了好几次都没有成功 xff0c 不知道是什么地方的问题 xff0c 后面再找一下问题 还有就是在Windows上搭建
  • OFD版式文件的优势

    OFD版式文件的优势 OFD格式是我国自主可控的电子文件版式文档格式 在OFD格式产生之前 xff0c 电子文件存档格式并没有统一的国家或行业标准 xff0c 档案工作中普遍采用DOC WPS PPTX等流式文件格式 内容易更改 转移过程存
  • OFD是什么?

    OFD是什么 xff1f OFD格式文件介绍 OFD xff08 Open Fixed layout Document的简称 xff0c 意为开放版式文档 xff09 xff0c 是按照我国自主研发制定的版式文档格式标准 GB T 3319
  • ofd格式文件转换成pdf格式的方法

    ofd格式文件很多人还比较陌生 xff0c 很多人接收到文件都不知如何打开阅读 xff0c 把文件发给对方 xff0c 还需要对方安装个专门的阅读软件 xff0c 我们还有另一个办法 xff0c 就是将OFD文件转换为PDF格式文件 xff
  • 比较出名的导航类网站

    网址导航是把很多网站集合起来 xff0c 按照一定的条件进行分类的网站 网址导航方便网民快速找到自己需要的网站 xff0c 可以直接到需要的网站 xff0c 而不必记住各个网站的网址 现在的网址导航一般都提供自己常用的查询工具 xff0c
  • 使用NGINX作为HTTPS正向代理服务器

    简介 xff1a NGINX主要设计作为反向代理服务器 xff0c 但随着NGINX的发展 xff0c 它同样能作为正向代理的选项之一 正向代理本身并不复杂 xff0c 而如何代理加密的HTTPS流量是正向代理需要解决的主要问题 本文将介绍
  • 超级小的docker镜像

    超级小的docker镜像 xff0c 通过可用来做基础镜像或者测试使用 拉镜像尽量选择带有apline或slim标签的 xff0c 体积很小 alpine镜像官方地址 xff1a https hub docker com alpine 拉取
  • 16进制转Base64的实现原理及代码

    随着计算机技术的发展 xff0c 数据的存储和传输方式也在不断更新 xff0c 其中十六进制字符串和Base64编码是两种常见的数据表示方式 本文将介绍16进制字符串和Base64编码的原理 xff0c 并提供Java代码实现16进制字符串
  • MySQL错误-this is incompatible with sql_mode=only_full_group_by解决办法

    原因分析 xff1a 一 原理层面 这个错误发生在mysql 5 7 5 版本及以上版本会出现的问题 xff1a mysql 5 7 5版本以上默认的sql配置是 sql mode 61 ONLY FULL GROUP BY xff0c 这
  • pulsar-admin接入项目

    练手项目 第一步 xff1a 添加依赖 lt dependency gt lt groupId gt org apache pulsar lt groupId gt lt artifactId gt pulsar client admin
  • C/C++语言——函数返回临时变量、对象

    函数内部栈上创建的临时变量 临时对象 xff0c 生命周期只在函数运行期间 xff0c 函数运行结束后 xff0c 就会释放对应内存空间 错误的函数写法 int amp test1 int x 61 1 return x 错误的函数写法 i
  • VS2008——调试方法大全

    一 断点调试 总结以下VS2008的调试方法 xff0c 首先最常用的就是使用断点了 xff0c 断点分为两种 xff1a 普通断点 跟踪点 普通断点就是红色圆点 xff0c 跟踪点是红色菱形 可以通过右键设置断点相关内容 xff0c 让断
  • Effective C++——22.将成员变量声明为private

    1 一致性 xff1a 如果public中的每样东西都是函数 xff0c 就不需要思考使用的时候要不要带小括号 2 使用函数可以让成员变量的处理有更精确的控制 3 封装性 xff1a 有时候要根据不同情况修改set和get的实现方式 xff

随机推荐

  • Effective C++——4.确定对象被使用前已经初始化

    1 为防止有的情况下对象未初始化导致的混乱 xff0c 最佳的处理办法就是 xff1a 永远在使用对象之前先将它初始化 对于无任何成员的内置类型 xff0c 必须手工完成 2 内置类型以外的任何其他东西 xff0c 初始化责任在构造函数中
  • Effective C++——32.确定public继承是“is-a”关系

    1 is a关系的概念 xff0c 就是基类可以实现的事情 xff0c 子类就一定要能实现 如果不能实现 xff0c 可以修改设计 xff0c 比如将基类能实现 xff0c 子类却不能实现的事情派生出一个中间基类 记住一点 xff1a 1
  • Java中repaint方法清除原来图像问题

    虽然Java界面编程作用不大 xff0c 但在兴趣的驱使下还是了解了一下 xff0c 在写小程序的时候发现了repaint方法有时候会清理原来的图像 xff0c 有时候又不清理 下面贴出我通过API文档得出的结论 xff0c 以下例子窗口为
  • 怎样找回自己CSDN丢失博客?

    写博客是件很欢快的事情 xff0c 但没多久就发现自己刚写的博客丢失 xff0c 这是一件更加 欢快 的事情 百度了一下关于CSDN博客丢失的现象 xff0c 虽然不算很多 xff0c 但还是有个别人也同样发生了这样的情况 注 xff1a
  • 拓扑排序(队列实现)

    什么是拓扑排序呢 xff1f 就是将一个有向无环图中所有顶点在不违反先决条件关系的前提下排成线性序列的过程称为拓扑排序 学拓扑排序有什么用呢 xff1f 当然有用啦 比如说学校排课的时候 xff0c 会考虑到有的课程需要先修 我们学完C程序
  • Arch的VBox安装笔记

    Arch Version archlinux 2015 12 01 dual Virtual Box Version 5 0 16 r105871 Update xff1a 2016 03 26 17 08 18 1 分区 xff08 cf
  • Java Runtime (class file version 61.0), this version of the Java Runtime only recognizes class file

    maven打包报错 org springframework boot maven BuildInfoMojo hasbeen copiled by a more recent version of the Java Runtime clas
  • 前端JS接收服务端的二进制文件流实现文件下载

    前端JS接收服务端的二进制文件流实现文件下载 var binaryData 61 binaryData push res 改成Boole或者file类型 const url 61 window URL createObjectURL new
  • debian10ssh配置用户限制,日志等

    需求 xff1a 工作端口为2021 xff1b 只允许用户user01 xff0c 密码ChinaSkill21登录到router 其他用户 xff08 包括root xff09 不能登录 xff0c 创建一个新用户 xff0c 新用户可
  • CentOS搭建PySpider爬虫服务

    1 环境准备 前置环境部署 在开始部署前 xff0c 我们需要做一些前置准备 yum 更新 yum span class hljs operator span class hljs keyword update span y span 安装
  • openGauss5.0企业版CentOS单节点安装

    目录 一 安装环境 二 前置依赖包 三 安装前准备1 四 安装前准备2 五 安装 一 安装环境 CPU xff1a 2核 内存 xff1a 4G 磁盘 xff1a 20G 操作系统 xff1a CentOS 7 9 python版本 xff
  • SpringBoot+PageHelper+Bootstrap+Thymeleaf 实现分页功能

    本文针对那种想要快速实现功能 xff0c 而不是研究原理的 xff0c 那你就直接复制我的东西 xff0c 运行就好 如果想深入学习的同学请另行百度 第一种 Spring Boot 43 Thymeleaf 使用PageHelper实现分页
  • Idea集成使用SVN教程

    idea 从项目窗口跳到打开项目选项窗口 操作之后即可跳到如下界面 第一步 下载svn的客户端 xff0c 通俗一点来说就是小乌龟啦 xff01 官网下载地址 xff1a Downloads TortoiseSVN 下载之后直接安装就好了
  • IntelliJ IDEA 下的svn配置及使用的非常详细的图文总结

    IntelliJ IDEA 下的svn配置及使用的非常详细的图文总结 请叫我大师兄 CSDN博客 ideasvn配置 https blog csdn net qq 27093465 article details 74898489 首先 x
  • webpack 错误

    1 ERROR in src main css Module build failed from node modules mini css extract plugin dist loader js ReferenceError docu
  • 客户端js 读取 json 数据

    采用 XMLHttpRequest 读取 1 new 初始化 XMLHttpRequest 2 open 设置请求方式 xff0c 地址 3 send 发起请求 4 onload 请求成功 xff0c 返回结果 代码 xff1a lt DO
  • dataTable的中文文档

    DataTables Table plug in for jQuery https datatables net 用google 打开 xff0c 直接翻译 参考 选项 DataTables 及其扩展是极其可配置的库 xff0c 它们对 H
  • nodejs核心API

    1 Buffer对象 不需要引入 Bufferd对象用途 以二进制流进行数据的传送传递 1 三种创建方式 类似于数组的创建 用16进制存储 let buf1 61 Buffer alloc 20 13 console log buf1 lt
  • mysql select, from ,join ,on ,where groupby,having ,order by limit的执行顺序和书写顺序

    mysql select xff0c from xff0c join xff0c on xff0c where groupby having order by limit的执行顺序和书写顺序 关键字或 解释执行顺序select 查询列表 x
  • jQuery对checkbox的各种操作

    注意 xff1a 操作checkbox的checked disabled属性时jquery1 6以前版本用attr 1 6以上 xff08 包含 xff09 建议用prop 1 根据id获取checkbox 34 cbCheckbox1 3