点击盒子选中里面的单选框，并给盒子添加相应样式，美化单选框、复选框样式css用法，响应式滴
pc效果图：
移动端效果图：
代码直接上：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>首页模板选择</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/home_model.css"/>
<script src="js/jquery.min.js"></script> <script>
//对象的高度等于宽度的n倍,
function HtDivideWh(obj, n) {
$(obj).css("height", function () {
var oWidth = $(this).width() * n;
$(this).height(oWidth);
});
} //点击盒子选中里面单选框
function chk_idiv(id) {
var objc = document.getElementById("c" + id);
if (objc.checked == '') {
objc.checked = 'checked';
$(".check_box").css({
"border": "2px solid #fff"
});
$(objc).parents(".check_box").css({
"border": "2px solid #dc143c"
}); } else {
//objc.checked = '';
}
}
$(function () {
//避免图片尺寸不一致导致相应式出乱
HtDivideWh($(".img_box img"), 2.03) //实现初始化时选择数据库的原始值，并实现选中样式
$(".check_box").each(function ($index, info) {
if ($(info).find("input[type=radio]").val() == $("#hfTemplateId").val()) {
$(this).css({
"border": "2px solid #dc143c"
});
$(this).find("input[type=radio]").attr("checked", true);
}
}); //上传选择图片后自动填充
//获取对象input file 的图片地址，放进img
$("#file").change(function () {//input的id
var objUrl = getObjectURL(this.files[0]);//调用函数调取图片地址
obUrl = objUrl;
console.log("objUrl = " + objUrl);//base64编码，上传图片也可直接上传base64，后台解析即可
if (objUrl) {
$(".pic_view img").attr("src", objUrl);//选择img的ID，给src赋值
$(".pic_view").show();
}
}); //获取input file的文件地址
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {//basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) {//mozilla(firefox)兼容火狐
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {//webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
})
</script>
</head>
<body>
<article class="container">
<!--//初始数据库的选择-->
<input type="hidden" name="hfTemplateId" id="hfTemplateId" value="3" /> <div class="row model_box">
<div class="col-sm-4 col-xs-6">
<div class="check_box" onclick="chk_idiv(1)">
<div class="img_box"><img src="data:images/baby.png" /></div>
<div class="radio radio-danger">
<input name="model" value="1" id="c1" type="radio" />
<label>hahahahah</label>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="check_box" onclick="chk_idiv(2)">
<div class="img_box"><img src="data:images/clothes.png" /></div>
<div class="radio radio-danger">
<input name="model" value="2" id="c2" type="radio" />
<label>hahahahah</label>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="check_box" onclick="chk_idiv(3)">
<div class="img_box"><img src="data:images/food.png" /></div>
<div class="radio radio-danger">
<input name="model" id="c3" value="3" type="radio" />
<label>hahahahah</label>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="check_box" onclick="chk_idiv(4)">
<div class="img_box"><img src="data:images/liren.png" /></div>
<div class="radio radio-danger">
<input name="model" value="4" id="c4" type="radio" />
<label>hahahahah</label>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="check_box" onclick="chk_idiv(5)">
<div class="img_box"><img src="data:images/normal.png" /></div>
<div class="radio radio-danger">
<input name="model" value="5" id="c5" type="radio" />
<label>hahahahah</label>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="check_box" onclick="chk_idiv(6)">
<div class="img_box"><img src="data:images/waimai.png" /></div>
<div class="radio radio-danger">
<input name="model" id="c6" value="6" type="radio" />
<label>hahahahah</label>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="check_box" onclick="chk_idiv(7)">
<div class="img_box"><img src="data:images/zonghe.png" /></div>
<div class="radio radio-danger">
<input name="model" value="7" id="c7" type="radio" />
<label>hahahahah</label>
</div>
</div>
</div>
</div> <div class="page-header">
<h1>填写信息</h1>
</div>
<div class="row form_box">
<div class="col-md-6">
<div class="col-sm-6">
<span class="input_name">公司名称</span><input type="text" class="input-sm" />
</div>
<div class="col-sm-6">
<span class="input_name">公司地址</span><input type="text" class="input-sm" />
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-sm btn-info file_btn">上传图片</button>
<span class="input_name">企业图片</span><input type="file" id="file" class="input-sm" />
<div class="pic_view"><img src="" /></div>
</div> <p class="tc col-xs-12"><button class="btn btn-info" type="button">保 存</button></p>
</div>
</div>
</article> </body>
</html>
css：
/*单选框样式自定义*/
.radio {
padding-left: 20px; }
.radio label {
display: inline-block;
vertical-align: middle;
position: relative;
padding-left: 5px; }
.radio label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left:;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 50%;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out;
transition: border 0.15s ease-in-out; }
.radio label::after {
display: inline-block;
position: absolute;
content: " ";
width: 11px;
height: 11px;
left: 3px;
top: 3px;
margin-left: -20px;
border-radius: 50%;
background-color: #555555;
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
.radio input[type="radio"] {
opacity:;
z-index:; }
.radio input[type="radio"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
.radio input[type="radio"]:checked + label::after {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1); } .radio-danger input[type="radio"] + label::after {
background-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::before {
border-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::after {
background-color: #d9534f; } .tc{text-align:center;} .model_box{margin-right:-20px;}
.model_box>div{padding-right:20px;text-align:center;margin-top:30px;}
.check_box{border:2px solid #fff;}
.check_box:hover{border:2px solid #d5d5d5 !important;}
.img_box{text-align:center;padding:10px 0;}
.img_box img{width:80%;height:auto;} .form_box .input_name{padding-bottom:10px;}
.form_box>div>div{margin-top:15px;position:relative;}
.form_box .input-sm{width:100%;box-shadow:none;border:1px solid rgba(0,0,0,.08);margin-top:5px;}
.form_box input[type=file]{width:80px;position:absolute;top:-10px;left:120px;z-index:;opacity:;}
.form_box .file_btn{width:80px !important;position:absolute;margin:0px !important;top:-4px;left:120px;}
.form_box .btn{width:180px;margin-top:30px;margin-bottom:20px;}
.pic_view{height:200px;width:auto;margin-top:10px;display:none;}
.pic_view img{max-height:100%;max-width:100%;}
点击盒子选中里面的单选框，并给盒子添加相应样式，美化单选框、复选框样式css用法，响应式滴的更多相关文章
- JQ 操作样式，单选按钮跟复选框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Python+Selenium自动化-定位一组元素，单选框、复选框的选中方法
Python+Selenium自动化-定位一组元素,单选框.复选框的选中方法 之前学习了8种定位单个元素的方法,同时webdriver还提供了8种定位一组元素的方法.唯一区别就是在单词elemen ...
- 【三石jQuery视频教程】02.创建 FontAwesome 复选框和单选框
视频地址:http://v.qq.com/page/m/8/c/m0150izlt8c.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...
- Web前端之复选框选中属性
熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好 了.博主之前用户不少方法,经常Google到一些这个不好那个 ...
- 把复选框变成单选框(prop,attr的区别)
如果项目中需要统一样式的话,有可能会遇到把复选框变成单选框的需求. 下面是用jquery的简单实现 $(function(){ $("input[type='checkbox']" ...
- JS复选框选中
Web前端之复选框选中属性 熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常 ...
- jQuery选取所有复选框被选中的值并用Ajax异步提交数据
昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...
- bootstrap table 复选框选中后，翻页不影响已选中的复选框
使用的 jquery版本为 2.1.1 在项目中发现bootstrap table的复选框选中后,翻页操作会导致上一页选中的丢失,api中的 bootstrapTable('getSelections ...
- 纯CSS3来自定义单选框radio与复选框checkbox
单选框(radio)自定义样式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3 ...
- 个人永久性免费-Excel催化剂功能第58波-批量生成单选复选框
插件的最大威力莫过于可以把简单重复的事情批量完全,对日常数据采集或打印报表排版过程中,弄个单选.复选框和用户交互,美观的同时,也能保证到数据采集的准确性,一般来说用原生的方式插入单选.复选框,操作繁琐 ...
随机推荐
- 基于MySQL + Node.js + Leaflet的离线地图展示，支持百度、谷歌、高德、腾讯地图
1. 基本说明 本项目实现了离线展示百度.谷歌.高德.腾讯地图.主要功能如下: 实现了地图瓦片图下载.存储.目前支持存储至MySQL Node.js服务调用MySQL中的瓦片图 Leaflet展示地图 ...
- java.lang.ClassCastException: com.sun.proxy.$Proxy2 cannot be cast to...异常
异常: Exception in thread "main" java.lang.ClassCastException: com.sun.proxy.$Proxy2 cannot ...
- Django的分页器（paginator）
先导入模块: from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger 分页器paginator 下面的所有方法 ...
- Android崩溃提示 “EGL_BAD_CONFIG"
这两天将之前提到的一个室内定位程序的ArcGIS的SDK从10.2.8迁移到100.1.0. 期间反复出现奇怪的问题,最终定位到这个问题: java.lang.RuntimeException: cr ...
- SQL基础教程读书笔记-2
4 数据更新 4.1数据的插入 1.清单{①列清单 ②值清单列清单和值清单的数量必须保持一致.原则上,执行一次INSERT语句会插入一行数据对表进行全列INSERT时,可以省略表名后的列清单2.插入默 ...
- pku 2488 A Knight's Journey （搜索 DFS）
A Knight's Journey Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 28697 Accepted: 98 ...
- action属性注入为null
一. 问题: 今天调试代码遇到问题,使用spring管理action,当中注入了部分原始类型的属性. 配置示比例如以下: <bean class="test.login.test.Lo ...
- 【Java入门提高篇】Day10 Java代理——静态代理
今天要介绍的是一个Java中一个很重要的概念--代理. 什么是代理?联系生活想想看,代理似乎并不陌生,最形象的代表便是经纪人,明星一般都有经纪人,经纪人作为中间人,负责代理明星的相关事宜,比如说,有人 ...
- 【Java入门提高篇】Day7 Java内部类——局部内部类
今天介绍第二种内部类--局部内部类. 局部内部类是什么?顾名思义,那就是定义在局部内部的类(逃).开玩笑的,局部内部类就是定义在代码块.方法体内.作用域(使用花括号"{}"括起来的 ...
- CentOS7给终端配置快捷键【转发】
1.打开Applications,选择System Tools 2.选择Setting进入如下面界面,选择Keyboard 3.选择Keyboard,进入如下面界面,再点击Shortcuts 4.再点 ...