点击盒子选中里面的单选框，并给盒子添加相应样式，美化单选框、复选框样式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波-批量生成单选复选框
插件的最大威力莫过于可以把简单重复的事情批量完全,对日常数据采集或打印报表排版过程中,弄个单选.复选框和用户交互,美观的同时,也能保证到数据采集的准确性,一般来说用原生的方式插入单选.复选框,操作繁琐 ...
随机推荐
- 理论篇：关注点分离(Separation of concerns, SoC)
概念 关注点分离(Separation of concerns,SOC)是对只与"特定概念.目标"(关注点)相关联的软件组成部分进行"标识.封装和操纵"的能力, ...
- Js特殊字符转义之htmlEscape()方法
为了防止XSS攻击,常常需要将用户输入的特殊字符进行转义,原生js貌似还没有直接对其专业的方法,最近再读Js高级程序设计的时候刚好看到,碰巧项目中也刚好需要使用次方法,于是就之家搬来用了. 网上关于转 ...
- unity中Ray、RaycastHit 、Raycast（小白之路）
1.Ray Ray(Vector3 origin, Vector3 direction) Ray:在程序中可以理解为射线,就是以某个位置(origin)朝某个方向(direction)的一条射线,是一 ...
- THinkPHP简单漂亮的分页类 DownLoad
PHP include_once("config.php"); require_once('page.class.php'); //分页类 $showrow = 10; //一页显 ...
- 深入理解ES6之—增强的数组功能
创建数组 Array.of()方法 ES6为数组新增创建方法的目的之一,是帮助开发者在使用Array构造器时避开js语言的一个怪异点.Array.of()方法总会创建一个包含所有传入参数的数组,而不管 ...
- jmeter接口系列：时间戳、加密
JMeter安装配置 从官网下载JMeter的软件包apache-jmeter-x.x.zip,下载完成之后解压打开jmeter.bat即可. 说明 这里使用的jmeter版本是3.0,jdk版本是j ...
- iOS 提交AppStore不出现构建的版本
提交App Store不出现构建的版本 Xcode版本:8.0 近日往App Store上跟新一个版本,提交了好几次,built号增加了好几个,上传每次都成功了,但是在iTunes Contact上一 ...
- java多线程核心技术——第四章总结
第一节使用ReentrantLock类 1.1使用ReentrantLock实现同步:测试1 1.2使用ReentrantLock实现同步:测试2 1.3使用Condition实现等待/同步错误用法与 ...
- 大白话Vue源码系列(03)：生成AST
阅读目录 AST 节点定义 标签的正则匹配 解析用到的工具方法 解析开始标签 解析结束标签 解析文本 解析整块 HTML 模板 未提及的细节 本篇探讨 Vue 根据 html 模板片段构建出 AST ...
- javascript实时保存时出现改动多条记录的bug
文章实现编辑,编辑页面是右側弹出层,当有改动时就保存,对文章标题title加入改变change事件,有改变时就保存文章(saveArticle) $("#title").chang ...