<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<style type="text/css">

input[type=radio]{
width: 100px;
height:100px;
background: url('222.jpg') no-repeat center;
background-size: cover;
border:3px solid red ;
-webkit-appearance: none
}
input[type=radio]:checked{
border-color: green;
outline: 0;

}

input[type=checkbox]{
width: 100px;
height:100px;

background: red;
border:3px solid red ;
-webkit-appearance: none
}
input[type=checkbox]:checked{
background: green;
outline: 0
}

</style>
</head>
<body>
<input type="radio" name="aa">
<input type="radio" name="aa">
<input type="checkbox" name="aa">
<input type="checkbox" name="aa">
<input type="checkbox" name="aa">
<input type="checkbox" name="aa">
<script>
</script>
</body>
</html>

利用input-radio和input-checkbox的表单特性可以节省很多js代码的更多相关文章

  1. vue的表单的简单介绍 input radio checkbox等表单特性

    在vue中我们可以通过v-model来为表单元素实现双向绑定 1:v-model指令 数据的双向绑定 双向绑定是说我们不仅仅可以通过数据(M)的改变去影响视图(V),还是当视图的内容改变(V)去影响模 ...

  2. 表单添加缩略图及截图js代码

    此为表单提交是上传截图的代码,待优化: // 添加小程序图片 function addAvatar(obj){ var file = obj.files[0]; limit($('.avatar_bo ...

  3. Jquery Validate不是用submit按钮提交表单，使用a标签js代码都可以

    不多说,上代码. $("#form").validate(); $("#btn").click(function() { if($("#form&qu ...

  4. 怎样利用WordPress创建自己定义注冊表单插件

    来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...

  5. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

  6. i利用图片按钮 和 input type="image" 为背景提交表单

    <img src="img/cancel.jpg" onclick="javascript:document.getElementByIdx_x('loginFor ...

  7. Form 表单中的Input元素回车时不保存表单

    在Form表单中如果直接在Input元素里敲回车键,那么默认将提交表单,可以通过keydown事件取消默认此操作 $("form").live('keydown',function ...

  8. input ,button, textarea 1)使用disabled , 2) 显示值, 3) 表单提交. 4) jquery.form.js ajaxSubmit() 无刷新ajax提交表单.

    1.使用disabled input , button  textarea 可以 被 禁用, 禁用的效果 : 1) 上面的点击事件无法使用 --- button       : 下面的 onclick ...

  9. form表单中只有一个input时，按回车键后表单自动提交(form表单的一个小坑)

    form中只有一个input按回车键表单会自动提交 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一 ...

随机推荐

  1. js数据结构与算法--递归

    递归,函数自己调用自己 return 返回值, 后面的代码不执行 function fn(num){ console.log(num) if(num == 0){ return; } fn(num-1 ...

  2. API Star：一个 Python 3 的 API 框架

    为了在 Python 中快速构建 API,我主要依赖于 Flask.最近我遇到了一个名为 "API Star" 的基于 Python 3 的新 API 框架.由于几个原因,我对它很 ...

  3. Python数据类型的用法

    字符串的用法 res = 'hellow,world' print(res) #res.显示的都是它的方法,下划线的除外 1 判断字符串的结尾字符,返回的值的布尔形式 endswith 判断字符串的开 ...

  4. 循环（while、for)

    写重复的代码是程序员最不耻的行为,那么如何做到不用写重复代码又能让程序重复一段代码多次呢,循环语句就派上用场拉…… 一.while 循环 # while 语法结构 while 条件: 执行代码.... ...

  5. Python装饰器使用规范案例详解

    由于函数也是一个对象,而且函数对象可以被赋值给变量,所以,通过变量也能调用该函数. >>> def now(): ... print('2015-3-25') ... >> ...

  6. 10，Scrapy简单入门及实例讲解

    Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的, 也可以 ...

  7. Java-数据结构之栈练习

    栈(stack)可以看做是特殊类型的线性表,访问.插入和删除其中的元素只能在栈尾(栈顶)进行. 队列(queue)表示一个等待的线性表,它也可以看做是一种特殊类型的线性表,元素只能从队列的末端(队列尾 ...

  8. Nhibernate官方体系结构图部分中文翻译

    原文链接 :http://nhibernate.info/doc/nh/en/index.html#architecture 体系结构图 高度抽象NHibernate体系架构图 这幅图展示了NHibe ...

  9. Apache shiro学习总结

    Apache shiro集群实现 (一) shiro入门介绍 Apache shiro集群实现 (二) shiro 的INI配置 Apache shiro集群实现 (三)shiro身份认证(Shiro ...

  10. Boost入门

    [转载网友转载的 不过不知道原作者地址] Boost入门向导 简介:boost是一套开源的.高度可移植的C++模板库.它由C++标准委员发起,且里面很多组件有望成为下一代的C++标准库,其地位将会与S ...