HTML 5 & checkbox & switch components

<!DOCTYPE html>

<html lang="zh-Hans">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="xgqfrms">

    <meta name="generator" content="VS code">

    <title>checkbox & swicth components</title>

</head>

<body>

    <section>

        <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>

        <input type="checkbox" name="vehicle" value="Car"checked> I have a car<br>

    </section>

    <script>

        let cbs = [...document.querySelectorAll(`input[type="checkbox"]`)];

        console.log(`cbs =`, cbs);

        let v1 = cbs[0].checked;

        console.log(`v1 =`, v1, cbs[0].value);

        let v2 = cbs[1].checked;

        console.log(`v2 =`, v2, cbs[1].value);

    </script>

</body>

</html>

https://www.iviewui.com/components/switch

https://www.iviewui.com/components/progress

https://www.iviewui.com/components/rate

HTML 5 & checkbox & switch components的更多相关文章

  1. 论文阅读：Flow-level State Transition as a New Switch Primitive for SDN

    Name of article:Flow-level State Transition as a New Switch Primitive for SDN Origin of the article: ...

  2. 【转】GitHub 排名前 100 的安卓、iOS项目简介

    GitHub Android Libraries Top 100 简介 排名完全是根据 GitHub 搜索 Java 语言选择 (Best Match) 得到的结果, 然后过滤了跟 Android 不 ...

  3. GitHub Android Libraries Top 100 简介

    本项目主要对目前 GitHub 上排名前 100 的 Android 开源库进行简单的介绍, 至于排名完全是根据 GitHub 搜索 Java 语言选择 (Best Match) 得到的结果, 然后过 ...

  4. 2016年GitHub 排名前 100 的安卓、iOS项目简介（收藏）

    排名完全是根据 GitHub 搜索 Java 语言选择 (Best Match) 得到的结果, 然后过滤了跟 Android 不相关的项目, 所以排名并不具备任何官方效力, 仅供参考学习, 方便初学者 ...

  5. 64.GitHub 排名前100的android项目简介

    GitHub Android Libraries Top 100 简介 排名完全是根据 GitHub 搜索 Java 语言选择 (Best Match) 得到的结果, 然后过滤了跟 Android 不 ...

  6. 100个Github上Android开源库

    项目名称 项目简介 1. react-native 这个是 Facebook 在 React.js Conf 2015 大会上推出的基于 JavaScript 的开源框架 React Native, ...

  7. [ucgui] 对话框3——GUIBuilder生成界面c文件及修改

    >_<" 其实生成GUI有相应的工具:

  8. GitHub Top 100的Android开源库

    摘要: 本项目主要对目前 GitHub 上排名前 100 的 Android 开源库进行简单的介绍, 至于排名完全是根据GitHub搜索Java语言选择「Best M... 本项目主要对目前 GitH ...

  9. iPhone开发中的技巧整理

    1.NSCalendar用法 -(NSString *) getWeek:(NSDate *)d { NSCalendar *calendar = [[NSCalendar alloc] initWi ...

随机推荐

  1. LindAgile.SchedulingTask~设计一个不错的任务调度组件

    回到目录 SchedulingTask产生的原因 任务调试主要指定期执行某些任务代码,之前用过quartz,感觉有些重,使用时需要添加包包,配置管理项时,对于简单的项目用它就显得有些臃肿了,不如直接上 ...

  2. Sentinel 流程分析

    最近公司开始做新的项目.新项目准备用点新的技术.之前我们采用的是spring cloud的那一套.之前几个月看到阿里开始拥抱springcloud,推出好几个组件无缝兼容现有springcloud.我 ...

  3. Redis集群伸缩

    集群扩容 前提准备,目前集群中一共有6台机器,端口号分别是6381.6382.6383.6384.6385.6386 1) 准备新节点 准备两个新节点,端口号为6387和6388,配置和以前集群配置一 ...

  4. 简单介绍shell编程四剑客之grep

    概要:分别的作用 grep:文本过滤(模式:pattern)工具,grep,egrep,fgrep,擅长过滤. sed:stream editor 文本编辑工具:(流编辑器),擅长取行.替换. awk ...

  5. docker（3）容器管理命令

    接着上一篇,今天说一下Docker 有关容器的常用命令.算是比较详细了吧. docker run  命令: 注:此命令作用是使用一个镜像运行启动一个容器. 在启动运行的时候 会检查docker 中是否 ...

  6. 【Oracle学习笔记】定时任务(dbms_job)

    一.概述 Oralce中的任务有2种:Job和Dbms_job,两者的区别有: 1．  jobs是oracle数据库的对象, dbms_jobs只是jobs对象的一个实例, 就像对于tables, e ...

  7. MongoDB学习（配置用户账户和访问控制）

    理解admin数据库 安装MongoDB时,会自动创建admin数据库,这是一个特殊的库.有些用户账户角色赋予用户操作多个数据库的权限,而这些用户只能在admin数据库中创建.要创建有权操作所有数据库 ...

  8. 小tips：使用rem+vw实现简单的移动端适配

    首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...

  9. SpringMVC归纳-2(Session会话、拦截器)

    要点: 1.HttpSession:一个session的建立是从一个用户向服务器发第一个请求开始,而以用户显式结束或session超时为结束,借助session能在一定时间内记录用户状态. 2.Mod ...

  10. javaFX笔记----ComboBox模仿qq账号下拉框删除账号

    myComboBox.setCellFactory( new Callback<ListView<String>, ListCell<String>>() { @O ...