点击盒子选中里面的单选框，并给盒子添加相应样式，美化单选框、复选框样式css用法，响应式滴

2023-08-12 15:34:28

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%;}

码农公寓

相关文章