• 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01

    大乐透最新500期走势图:checked属性值是true还是checked

    燕赵风采20选5走势图 www.fllv.net 2019-1-7 18:05| 作者: admin| 查看: 2540| 评论: 0|来自: 蚂蚁部落

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

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

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

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

    [HTML] 纯文本查看 复制代码运行代码
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=" utf-8">
    <meta name="author" content="//www.fllv.net/" />
    <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>

    代码运行效果截图如下:

    a:3:{s:3:\"pic\";s:43:\"portal/201901/07/180600fi9i9p5kks6k9yiv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

    代码分析如下:

    (1).仅设置checked属性不赋值,可以将复选框设置为选中状态。

    (2).将checked属性值设置为true,也可以将复选框设置为选中状态。

    (3).将checked属性值设置为"checked",也可以将复选框设置为选中状态。

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

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

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

    [HTML] 纯文本查看 复制代码运行代码
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=" utf-8">
    <meta name="author" content="//www.fllv.net/" />
    <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>

    代码运行效果截图如下:

    a:3:{s:3:\"pic\";s:43:\"portal/201901/07/180640ikkvmdpcwcvxd5xe.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

    看一段代码实例:

    [HTML] 纯文本查看 复制代码运行代码
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=" utf-8">
    <meta name="author" content="//www.fllv.net/" />
    <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">
      <input type="checkbox" checked>
      <input type="checkbox" checked=false>
    </body>
    </html>

    代码运行效果截图如下:

    a:3:{s:3:\"pic\";s:43:\"portal/201901/07/180705os4hcmh73vcmcsm0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

    代码分析如下:

    (1).默认状态下,第二个复选框处于非选中状态,第三个处于选中状态。

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

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

    a:3:{s:3:\"pic\";s:43:\"portal/201901/07/180719ujl1j3jijil4ix44.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

    最新评论

    返回顶部
  • 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01
  • 山东快乐扑克3包选遗漏 南国特区彩票论坛手机 体彩p3图谜275期 大乐透走势图07 大红鹰报码 排列3跨度走势图 江西新时时彩投注技巧 福彩千禧3d试机号金码 竞彩足球比分点球算吗 双色球750期分布图 北京赛车软件 北京赛车结果预测软件 新疆时时彩开奖结96期 时时彩开奖结果记录 新疆时时彩自由的百科 动物福彩开奖走势图