点击盒子选中里面的单选框，并给盒子添加相应样式，美化单选框、复选框样式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波-批量生成单选复选框
插件的最大威力莫过于可以把简单重复的事情批量完全,对日常数据采集或打印报表排版过程中,弄个单选.复选框和用户交互,美观的同时,也能保证到数据采集的准确性,一般来说用原生的方式插入单选.复选框,操作繁琐 ...
随机推荐
- 原型模式（Prototype）
原型模式(Prototype) 原型模式虽然是创建型的模式,但是与工程模式没有关系,从名字即可看出,该模式的思想就是将一个对象作为原型,对其进行复制.克隆,产生一个和原对象类似的新对象.本小结会通过对 ...
- Javascript-数值运算 保留小数点位数，并对最后一位小数各种取整方法
今天遇到Javascript数值运算的坑,说到底,还是用得少啊.得多用多敲代码多遇坑. 先介绍以下三个Javascript number取整运算方法. Math.floor() 对一个数退一取整 例: ...
- yii2.0中数据缓存之增删改查
public function actionSss(){ /* * 获取到缓存 * 这里是获取的是根目录下 的common/main.php中的缓存类组件 * */ $cache=\Yii::$app ...
- CI框架使用PHPmailer发送邮件找回密码
之前用PHP+Mysql+jQuery结合ThinkPHP做了一个用户验证邮箱找回密码功能<ThinkPHP之PHP+Mysql+jQuery发送邮箱找回密码>,现在分享一下用CI框架结合 ...
- Mybatis框架解析之Builder解析
首先我们从builder这个类入手,首先我们注意到BaseBuilder,其实它的本质上市一个抽象类,它从本质上抽象出了Builder的一切,我猜想这里一定使用了建造者模式,但是这个抽象类里面居然没有 ...
- springboot学习（三）——http序列化/反序列化之HttpMessageConverter
以下内容,如有问题,烦请指出,谢谢! 上一篇说掉了点内容,这里补上,那就是springmvc的http的序列化/反序列化,这里简单说下如何在springboot中使用这个功能. 使用过原生netty ...
- C++ map multimap
map multimap map,multimap key-value对容器,也叫字典,map中不能存放key相同的元素,而multimap可以,容器中元素默认按升序排序 map multimap的相 ...
- SSRS Fields cannot be used in page headers or footers
问题环境:SSRS 2005 报表开发 尝试在Page Header中使用Data Set的字段,遇到以下的错误: The value expression for textbox '' refers ...
- 基于lucene.net 和ICTCLAS2014的站内搜索的实现1
Lucene.net是一个搜索引擎的框架,它自身并不能实现搜索.须要我们自己在当中实现索引的建立,索引的查找.全部这些都是依据它自身提供的API来实现.Lucene.net本身是基于java的,可是经 ...
- axios遇到的坑
axios 可以使用一个config.js 配置文件来管理它的请求信息.具体配置不细说,使用如下. 一,使用配置方式 GET方法: let promise = axios.get(url, con ...