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="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="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="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="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="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="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="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: 0; 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: 0; z-index: 1; } .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:2;opacity:0;} .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%;}