checked属性值是true还是checked

2019-1-7 18:05| 作者: admin| 查看: 4657| 评论: 0|来自: 蚂蚁部落

复选框标签具有checked属性，通过此属性可以设置复选框的选中状态。

非常简单的操作，但是还是有不少朋友存在后面类似的疑问，那就是不确定checked属性值是true还是checked。

因为两个属性值在实际代码中都有出现，并且都是有效的，也是导致出现疑问的主要原因。

下面通过代码实例详细进行一下分析，首先看一段代码实例：

[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style type="text/css">

input{

width:20px;

height:20px;

}

</style>

</head>

<body>

<input type="checkbox" checked>

<input type="checkbox" checked=true>

<input type="checkbox" checked="checked">

</body>

</html>

代码运行效果截图如下：

代码分析如下：

（1）.仅设置checked属性不赋值，可以将复选框设置为选中状态。

（2）.将checked属性值设置为true，也可以将复选框设置为选中状态。

（3）.将checked属性值设置为"checked"，也可以将复选框设置为选中状态。

上面三种情况都比较容易接受，因为在代码中比较常见，实际编码中仅推荐第一中方式。

第二和第三种方式不被推荐，具体参阅HTML 布尔属性值一章节。

虽然后两种方式非常符合情理，能够将复选框设置为选中状态，也许这只是一个误会，这两个值并不是专属，有些属性值会让不少朋友匪夷所思，看如下代码实例：

[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style type="text/css">

input{

width:20px;

height:20px;

}

</style>

</head>

<body>

<input type="checkbox" checked=false>

<input type="checkbox" checked=true>

</body>

</html>

代码运行效果截图如下：

是不是感觉很奇怪，按照常理，checked属性值为true是选中状态，那么属性值为false就是未选中状态。

然而事实是，即便属性值为false，复选框依然是选中状态。其实有这样有一个规律，那就是在HTML中，只要设置checked属性，无论是否赋值，或者赋何种值，复选框都是选中状态。但是在通过JavaScript进行操作的时候，并非如此。

看一段代码实例：

[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style type="text/css">

input{

width:20px;

height:20px;

}

</style>

<script>

window.onload=function(){

let inputs=document.getElementsByTagName("input");

inputs[1].checked=true;

inputs[2].checked=false;

}

</script>

</head>

<body>

<input type="checkbox">

<input type="checkbox" checked>

<input type="checkbox" checked=false>

</body>

</html>

代码运行效果截图如下：

代码分析如下：

（1）.默认状态下，第二个复选框处于非选中状态，第三个处于选中状态。

（2）.通过JavaScript动态两个复选框分别设置为选中和取消选中。

由此可见，在使用JavaScript进行动态操作的时候，设置checked属性值可为true或者false可以复选框设置为选中和非选中状态，经过测试，设置为"checked"也可以设置为选中状态，设置为undefined也可以取消选中，不过我们最好还是标准一些，毕竟MDN将checked属性阐述为布尔型类型，截图如下：

关于input中的checked属性相关推荐

android中怎么保存checkbox中的checked属性_Vue 精粹：v-model指令在组件中怎么玩
最近在写组件的时候,遇到了 v-model 的使用问题,在 Vue 官方文档中,有两小端内容是关于 v-model 指令在组件中的使用,查阅文档后,依然不得要领,最后几番折腾,理论结合实践,终于领悟其 ...
input 中的autoComplete属性
// autoComplete默认为on 代表是否让浏览器自动记录之前输入的值 // 很多时候,需要对客户的资料进行保密,防止浏览器软件或者恶意插件获取到 // 可以在input中加入autocomp ...
android中怎么保存checkbox中的checked属性_第二十四天HTML中的form表单
form表单用于收集用户信息,如:登录.注册等场景:所有要提交的数据都必须放在form标签中 action:提交地址.动作,与input标签中typy标签的submit属性相关联. ,提交地址是ac ...
为什么input中的maxlength属性失效了
今天在遇到限制某个输入框的最大长度的需求,比如一个要求输入手机号的输入框:当时我是这样写的 <input type="text" placeholder="请输入手 ...
checkbox中checked属性总结
一.checked属性定义和用法 1.checked属性是一个布尔属性 2.checked属性规定在页面加载时应该被预先选定的<input>元素 3.checked属性适用于<inp ...
checked属性详解
https://www.cnblogs.com/mark5/p/11023851.html 注意:当元素中有checked属性时,其值无论是什么,都是被选中状态,那怎么才能让其不被选中呢,就是用jqu ...
checked jq 添加_jquery中input复选框的checked属性
在今日的多选,反选,全选试验中,关于通过jQuery方法来实现复选框的选中与否问题,我有了以下发现: 1.不能通过.css('checked','checked')方法来设置或者获取复选框的check ...
用jQuery提取到input中value值 checked选择器
1.首先要引入jq(不会的可以参考往期) 2.在html中创建一个input表单 <html><head><meta charset="utf-8"& ...
jquery attr方法获取input的checked属性问题
1.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase <input type="checkbox" id= ...

关于input中的checked属性

checked属性值是true还是checked

关于input中的checked属性相关推荐

最新文章

热门文章