javascript中如何判断checkbox是否选中?基础知识入门_表单小白帮助

javascript判断checkbox是否选中的方法:1、直接通过checkbox的checked属性判断。2、调用jQuery使用attr()或is()方法判断。对于在js中来判断checkbox是否被选中很简单,示例如下:1、直接通过checkbox的checked属性判断。HTML代码:<input type="checkbox" name="box

javascript中如何判断checkbox是否选中?基础知识入门

javascript判断checkbox是否选中的方法:1、直接通过checkbox的checked属性判断。2、调用jQuery使用attr()或is()方法判断。

javascript中如何判断checkbox是否选中?基础知识入门_表单小白帮助

对于在js中来判断checkbox是否被选中很简单,示例如下:

1、直接通过checkbox的checked属性判断。

HTML代码:

<input type="checkbox" name="box">

相应的javascript代码如下:

var check = document.getElementsByTagName('input')[0];
console.log(check.checked);//false

因为HTML代码中没有设置checked属性值,所以默认返回false,反之则返回true;若要在HTML中设置checkbox为选中状态则可以这样设置:

<input type="checkbox" name="box" checked="true">

2、JavaScript调用jQuery判断checkbox是否被选中

(1)、JQ1.6版本之前(不包括1.6版本)判断checkbox是否被选中用的是attr()方法,HTML代码与上面相同,只放JQ代码:

console.log($("input[type='checkbox']").attr('checked'));//false

(2)、JQ1.6版本之后Jquery中新引入了prop()方法,此时再用attr()方法判断checkbox的状态则会返回undefined,若有设置checked属性为true,则会返回checked而不是true

1.6+版本prop()方法:

console.log($("input[type='checkbox']").prop('checked'));//false

(3)、除了以上两种方法JQ中还有一个is()方法同样可以判断checkbox的状态

is()方法代码如下:

console.log($("input[type='checkbox']").is(':checked'));//false
海计划公众号
(0)
上一篇 2020/03/20 06:49
下一篇 2020/03/20 06:49

您可能感兴趣的内容

  • 简历本使用教程_在线免费简历制作平台

    简历本使用教程 官方网址:http://www.jianliben.com/ 简介描述:在线免费简历制作平台 简历本是一个专业免费的在线简历制作平台,为求职者提供丰富的简历模板,求…

    2020/03/11
  • html元素间的边距重叠问题与BFC使用攻略_元素攻略教程

    一、边距重叠常见情况1、垂直方向上相邻元素的重叠(水平方向上不会发生重叠)2、 垂直方向上父子元素间的重叠二、BFC1、什么是 BFCBFC(Block Formatting Context),即块级格式化上下文,创建了 BFC 的元素是一个独立的容器,里面无论如何布局都不会影响到外面的元素2、创建 BFC 的方法(1)设置 overflow 属性,除了 v

    2020/03/26
  • 你可能不知道的CSS小白知识_规范入门百科

    前言也许有人会说,都快 2019 年了怎么还读 CSS2.1 规范。一方面,现在最新的 CSS (core) 规范是 CSS2.2(以下截图来自 https://www.w3.org/TR/CSS/ ),又因为 CSS2.1 有中文的版本,并且和 CSS2.2 规范差异性不是很大,基于偷懒的目的最终选择阅读了 CSS2.1 规范。记得面试的时候,面试官说 “

    2020/03/20
  • react-native-elements零基础入门_一个高度可定制的跨平台 React Native UI 库

    react-native-elements零基础入门 官方网址:https://react-native-training.github.io/react-native-eleme…

    2020/03/06
  • hacker-laws基础教程_对开发人员有用的定律、理论、原则和模式

    hacker-laws基础教程 GitHub:https://github.com/dwmkerr/hacker-laws 简介描述:对开发人员有用的定律、理论、原则和模式 对开发…

    2020/03/06
  • 极客学院小白知识专业IT职业在线教育平台

    极客学院基础入门 官方网址:http://www.jikexueyuan.com/ 简介描述:专业IT职业在线教育平台

    2020/03/05
  • 也许,这样理解OAuth原理更容易!菜鸟指南_原理基础知识

    那一年,我所在公司的用户量达到了公司成立以来的新高峰,经过多个程序员日日夜夜加班,每个业务系统达到了几乎四个 9 的稳定性,同时业务在业界也有了一定的知名度。PS:以下业务场景只针对于 Web 系统,而且 Web 页面有后台服务程序的场景。那一天突然有一个合作商登门拜访,提出合作共赢的意向。业务的场景就是我们的系统用户能够在他们系统登录,并能够获取用户一定的

    2020/03/23
  • JS断点调试,必备的javaScript的debug调试技巧菜鸟教程_调试小白常识

    1.断点调试是啥?难不难?断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了。操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome浏览器的断点为例)步骤记住没?用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开

    2020/04/06
  • Js操作Cookie入门知识_cookie使用攻略

    介绍Web 服务器和 HTTP 服务器是无状态的,因此当 Web 服务器将网页发送到浏览器时,连接会被断开,服务器会忘记与用户相关的所有内容。那么浏览器和 Web 服务器是怎样记住用户信息的?cookie 被发明出来解决这个问题。当用户访问网页时,他们的名字、唯一 ID 或其他任何信息都可以存储在浏览器的 cookie 中。 当用户下次又回到网页时,cook

    2020/03/24
  • Bagel小白知识_移动端网络调试工具

    Bagel小白知识 GitHub:https://github.com/yagiz/Bagel 简介描述:移动端网络调试工具 Bagel是一个本地的iOS网络调试器。它不是代理调试…

    2020/03/12
  • 使用css实现全兼容tooltip提示框入门知识_提示入门基础教程

    基本原理先设定一个背景色的普通div盒子,然后使用上篇post得到的三角型图标,把div盒子设置为相对定位模式,三角型图标设置为绝对定位,位置相对于div盒子,调整到合适的位置。这样就得到一个基本的tooltip,但是没有边框看起来总是不舒服,我们可以给div盒子设置一个边框,这没什么难度,但是三角形图标如何设置边框呢?这里我们通过一个取巧的方式,让两个不同

    2020/03/20
  • Js的typeof返回哪些数据类型?小白入门_类型小白攻略

    Js的typeof返回哪些数据类型?小白入门 JavaScript中的数据类型:值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Nu…

    2020/03/19
  • sql语句备忘录小白基础_sql入门基础知识

    结构化查询语言(Structured Query Language)简称SQL,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询、更新和管理关系数据库系统。添加一个自增ID字段ALTER TABLE tblname ADD COLUMN csmid COUNTER (0, 1)access 创建一个有自增字段的表CREATE T

    2020/03/29
  • store入门知识_使用localStorage和sessionStorage的更好方法

    store入门知识 GitHub:https://github.com/nbubna/store 简介描述:使用localStorage和sessionStorage的更好方法 一…

    2020/03/11
  • 做好这几件事,代码质量可以提升一个档次入门百科_质量菜鸟知识

    这篇文章又是关于代码质量的,有些同学可能觉得我比较啰嗦。不过我就是想用这种方式让大家重视起来。其实说来说去就那么几种方法,但是实际执行起来真是难于登天。低质量的代码真的是一种灾难。当你的代码变得越来越混乱,维护起来就会花费大量的时间。在最坏的情况下,代码将变得不可维护,并且项目会慢慢终止。为了避免这种情况,你需要注意你的代码质量。尝试在代码质量上花费一些时间

    2020/03/23
  • Node.js v13.2.0 开始支持ES modules了菜鸟知识_node使用说明

    写在前面Node.js 前不久发布了v13.2.0,宣布开始支持ES modules。在此之前,想要在node中使用ES modules,需要添加–experimental-module。v13.2.0版本后,可以直接使用ES modules了。在node中使用ES modules想要在项目中使用ES modules,有以下两种方法:1、文件后缀名使用.m

    2020/03/22