checked属性 详解

2023-11-05

https://www.cnblogs.com/mark5/p/11023851.html

注意:当元素中有checked属性时,其值无论是什么,都是被选中状态,那怎么才能让其不被选中呢,就是用jquery或js代码实现

 

  1、html中的checked属性。仔细研究下会发现一个很怪异的现象。

  

  你知道上面这四个复选框到底那些被选中了?那些没被选中吗?

  其实乍一看我也不知道结果,运行完后也想不通为什么,查看资料才发现确实是那样的。

  结果是:

  

 

  其实原理是这样的,复选框里只要有checked属性,不管是否为其赋值,结果为空或true或false或任意值,均为选中状态。

  

  2、利用javascript操作checked来控制复选框是否选中。

  

  结果:

  

  要使其不选中,即设置checked属性值为false。

 

  3.利用jQuery操作checked来控制复选框选中与否。

  

  结果第一个复选框选中。

  相反的,checked属性值设为false就是未选中了

  

  这里需注意:

  无论是用javascript还是jQuery来操作checked属性,其值均为true或false,切忌带引号,否则会出错。

 

   补充:获取复选框是否选中问题:

  例如,有这样一个例子,我要获取这三个复选框是否选中:

1

2

3

<input type="checkbox" name="checkbox1" id="checkbox1" checked>看书

<input type="checkbox" name="checkbox2" id="checkbox2">电影

<input type="checkbox" name="checkbox3" id="checkbox3" checked>爬山

  在js中,我们可以这样来写:

1

2

3

4

5

6

var checkbox1 = document.getElementById("checkbox1");

var checkbox2 = document.getElementById("checkbox2");

var checkbox3 = document.getElementById("checkbox3");

console.log(checkbox1.checked); // true

console.log(checkbox2.checked)  // false

console.log(checkbox3.checked)  // true

  

  在jQuery中,可以这样获取:

1

2

3

4

5

$(function(){

      console.log($("#checkbox1").attr('checked'))  // checked

      console.log($("#checkbox2").attr('checked'))  // undefined

      console.log($("#checkbox3").attr('checked'))  // checked

})

  从上面例子可以看出同样是获取复选框是否选中,js的获取值是布尔值,即true 或者 false,而jQuery的获取值则是checked或者undefined

此博客只是为了记忆相关知识点,大部分为网络上的文章,在此向各个文章的作者表示感谢!

分类: html

好文要顶 关注我 收藏该文  

双间
关注 - 0
粉丝 - 24

+加关注

0

0

« 上一篇: jquery对象中 “冒号” 详解
» 下一篇: @component注解

posted @ 2019-06-14 16:09  双间  阅读(6766)  评论(0)  编辑  收藏

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

checked属性 详解 的相关文章

  • 【安全开发】C/C++安全编码规范

    C本质上是不安全的编程语言 例如如果不谨慎使用的话 其大多数标准的字符串库函数有可能被用来进行缓冲区攻击或者格式字符串攻击 但是 由于其灵活性 快速和相对容易掌握 它是一个广泛使用的编程语言 下面是针对开发安全的C语言程序的一些规范 1 1
  • windows11百度网盘下载,win11iso镜像百度云下载

    windows11百度网盘下载 win11iso镜像百度云 windows11百度网盘下载 win11iso镜像百度云链接 https pan baidu com s 1r96WDwsDURdrRt1nl Z0PQ 提取码 6666 上面是
  • 在vant组件下阻止手机自带键盘弹起

    废话 van field输入框伴随着小键盘的弹起 但是在已经定义了的van popup中 小键盘的弹起显得多余 尤其在地区 籍贯等的选择上 所以利用 focus 在获取焦点的时候进行阻止 代码
  • 局域网配置网站DNS服务器的安装

    小提示 要想成功部署DNS服务 运行Windows Serve 2003的计算机中必须拥有一个静态IP地址 只有这样才能让DNS客户端定位DNS服务器 另外如果希望该DNS服务器能够解析Internet上的域名 还需保证该DNS服务器能正常
  • STM32单片机示例:多个定时器级联使用

    文章目录 目的 基础说明 关键配置与代码 示例链接 目的 有些情况下会遇到单片机的定时器位数不够用 这时候可以使用低定时器级联的方式来处理 这里将对此做个示例说明 基础说明 这里说的定时器级联是指一个定时器正常计数工作 然后在发生溢出时发送
  • PYthon 转换HTML到Text纯文本

    今天项目需要将HTML转换为纯文本 去网上搜了一下 发现Python果然是神通广大 无所不能 方法是五花八门 拿今天亲自试的两个方法举例 以方便后人 方法一 1 安装nltk 可以去pipy装 注 需要依赖以下包 numpy PyYAML
  • AT24C02的使用说明和完整代码-51单片机

    AT24C02的使用说明和完整代码 51单片机 简述 at24c02为存储器芯片 可以使用单片机将数据存入其中 同时也可以任意读取 at24c02的原理及使用方法在其说明资料中已有充分的讲述 本篇仅对其使用的关键步骤进行罗列 以及说明一下具
  • MySQL主从复制的实现

    MySQL主从复制的理解图 MySQL Replication原理 主从复制 也称 AB 复制 允许将来自一个MySQL数据库服务器 主服务器 的数据复制到一个或多个MySQL数据库服务器 从服务器 复制是异步的 从站不需要永久连接以接收来
  • React中文文档之Lifting State Up

    Lifting State Up 提升状态 经常的 几个组件需要映射相同的数据改变 我们推荐提升共享的state状态到它们最近的公共祖先元素 让我们看看这是如何实现的 在这个章节 我们将创建一个温度计算器 计算在一个给定的温度 水是否会沸腾
  • 20200331 --【Python】-- selenium 登录练习

    学习 python 的第59天 模拟腾讯课堂 自动化 登录案例 简单 coding utf 8 Time 2020 3 31 10 52 Author admin Site File 腾讯课堂登录 py Software PyCharm i
  • Allegro显示飞线和隐藏飞线

    隐藏飞线 显示飞线
  • C++ 标准库中数据类型转换

    头文件引用
  • 延迟队列的方案设计

    延迟队列的实现方案 一 应用场景 什么是延时队列 顾名思义 首先它要具有队列的特性 再给它附加一个延迟消费队列消息的功能 也就是说可以指定队列中的消息在哪个时间点被消费 延时队列在项目中的应用场景是比较多的 尤其像电商类平台 1 订单成功后
  • 基于js利用经纬度进行两地的距离计算

    根据地球上两点之间的经纬度计算两点之间的直线距离 经纬度到距离的计算在通信工程中应用比较广泛 所以cosbeta通过搜索找到了一个js的计算脚本 其实是google map的计算脚本 应该算是比较准确了 做成了这个经纬度算距离的工具 今天有
  • 全到哭,阿里新产2023版Java架构核心宝典,涵盖Java进阶所有主流技术

    导言 什么是架构师 对于程序员来说 聊架构是一个永不过时的话题 实际上 每一家公司都有自己对架构师不同的定位 因为不同的公司 所处的阶段 业务模式以及应用场景都不一样 因此对架构师的要求不一样 所以定位也就不同 但是 无论如何 架构师除了优
  • STM32------TFTLCD原理

    目录 TFTLCD简介 一 知识点 1 TFTLCD驱动原理 ALINETEK TFTLCD模块介绍 2 2 8寸TFLCD模块特点 3 TFTLCD模块原理图 4 TFTLCD接口说明 5 并口驱动简介 6 ILI9341驱动时序 7 驱
  • 过滤器使用与bean注入

    1 web xml中各元素启动顺序 在项目启动时 监听器listener最先初始化 然后是过滤器filter 最后是servlet Spring监听器在启动时会读取spring配置文件 进行spring容器的初始化 springMVC的di
  • springBoot上传文件时MultipartFile报null 空 问题解决方法

    1 问题描述 之前用spring MVC 转成spring boot之后发现上传不能用 网上参考说是spring boot已经有CommonsMultipartResolver了 但是我的上传后台接收的还是null 2 第一种解决方法 加入
  • Jenkins中使用火线进行Android静态代码扫描

    背景 火线 是360Qtest测试团队在公司内部经过半年实践后向外推出的一款针对Android代码的静态扫描工具 本文主要介绍如何在Jenkins下植入火线扫描并实时查看结果的配置 环境配置 Jenkins 推荐使用最新的版本 本文使用的是
  • Java基础系列8:Java的序列化与反序列化(修)

    一 简介 对象序列化就是把一个对象变成二进制的数据流的一种方法 通过对象序列化可以方便地实现对象的传输和存储 把对象转换为字节序列的过程称为对象的序列化 把字节序列恢复为对象的过程称为对象的反序列化 对象的序列化主要有两种用途 1 把对象的

随机推荐