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

最新推荐文章于 2023-12-14 14:33:07 发布
最新推荐文章于 2023-12-14 14:33:07 发布
阅读量298 收藏 1
点赞数
文章标签： 数据库 javascript ViewUI
原文链接：http://www.cnblogs.com/LChenglong/p/7092927.html
版权

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

 

转载于:https://www.cnblogs.com/LChenglong/p/7092927.html

anda9128
关注
CSS 选择器，样式，盒子模型及浮动
weixin_52625590的博客
07-27 2137
CSS 选择器，样式，盒子模型及浮动
IFE糯米学院-checkbox和radio样式的美化实现
realDE的博客
02-26 410
//html部分 <body> <p>这是一组radio按钮</p> <section> <input type="radio" name="radio" id="radio1"> <label for="radio1"></label> <br/> <input type="radio" name="radio" id="radio2
035：vue项目中 radio和checkbox美化方法
大剑师兰特的GIS世界
09-16 500
在vue项目开发中，经常会用到radio和checkbox， 有时候原有的丑陋样式不能满足产品和UI的法眼，就需要更换一种表达方式。在本文中，我们通过覆盖等技术手段实现了radio和checkbox的样式美化。
【ElementUI】样式操作二次优化【整合】
Sabrina_cc的博客
06-06 1664
本篇主要整合在ElementUI使用过程中对组件的优化，包含el-table el-tree el-form el-input icon
ElementUI笔记 -- 2
weixin_68540347的博客
02-23 2147
ElementUI笔记 -- 2
HTML+CSS实现单选框、复选框美观的样式
09-24
在网页设计中，单选框（Radio Button）和复选框（Checkbox）是常见的交互元素，用于用户在多个选项中做出选择。然而，浏览器默认的样式通常比较单一，不符合现代网页设计的美观要求。通过HTML和CSS，我们可以自定义...
CSS3 H5单选框复选框和开关按钮美化样式UI.zip
07-11
代码片段： [removed][removed] [removed][removed] [removed][removed] [removed][removed]
纯CSS单复选框选中美化特效
07-14
这篇文章将深入探讨如何利用纯CSS技术对单选框和复选框进行美化，并实现独特的交互效果。 首先，我们了解基础的HTML结构。一个单选框（radio button）和复选框（checkbox）通常由`<input>`标签配合`<label>`标签...
jQuery单选框复选框美化代码
06-24
jQuery单选框复选框美化代码正是为了解决这个问题，它提供了一套精致的单选和复选组件，可以极大地提升表单的视觉效果。 jQuery库是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画制作和Ajax交互。在这...
element(兼容2.72以下的版本)实现树形数据+复选框的效果
weixin_44727080的博客
06-12 1358
element(兼容2.72以下的版本)实现树形数据+复选框的效果
VUE：前端的框架简化DOM & Element ：美化页面
habe33的博客
07-13 2471
> * 能够使用VUE中常用指令和插值表达式 > * 能够使用VUE生命周期函数 mounted > * 能够进行简单的 Element 页面修改
vue3 & element-plus 美化el-tree
最新发布
m0_68285431的博客
12-14 1079
只需要copy就可以了，但是需要自己看一遍逻辑，其实逻辑也没有太复杂，大家可以写成递归，小弟先行谢过了。可以只用lazy进行懒加载，你只需要copy到你的Vue3项目中，就可以对树目录进行美化了，lazy的逻辑我也放出来了，只需要修改一下参数就可以了。
单选框、复选框的美化
xc_1029的博客
01-29 1145
单选框、复选框的美化-JS原生 对于一些标签，在我们不喜欢它自带样式的时候，可以使用覆盖或隐藏的方式给其更改外观，这次我使用的是覆盖的方法。 复选框美化 先放一张原来的样式图 把每个input标签用一个div包起来 div class="check"> input type="checkbox" class="check2"> 111input> div> 在js部分
前端学习笔记——CSS（二）
羚漆的博客
07-26 427
文档流又叫常规流，网页是一个多层的结构，最底层就是文档流，默认情况下所有的元素都是在文档流中遵循其规则进行排列的。当一个元素被多个相同优先级的选择器同时选中，并对相同的属性设置不同的值，会优先使用靠近元素的选择器所设置的样式，当选择器优先级不同时，层叠行无法解决样式冲突。页面中所有元素，其本质都是一个矩形盒子，页面就是由一个一个地矩形盒子组成的，网页的布局就是把这些盒子摆放在合适的位置上。四部分组成的，区别在于内边距与边框会影响标准和模型的可见框大小而不会影响IE盒模型的可见框大小。外边距margin。..
点击盒子后为选中状态 2021-05-17
weixin_53390063的博客
05-17 149
//生成完整航栏 function create_navSupplier_List(arr2, industry_id, company_type_id) { var temp_id = $('#tb_sec_id').val(); var newArr = []; for (var j = 0; j < arr2.length; j++) { var nav = arr2[j][.
html5 漂亮单选按钮样式,10个HTML5美化版复选框和单选框
weixin_36211428的博客
06-19 4333
单选框html一、CSS3漂亮的自定义Checkbox复选框 9款迷人样式以前咱们分享过一款很是不错的CSS3自定义checkbox复选框纯CSS3美化Checkbox和Radiobox按钮，外观很是时尚。今天咱们来分享一款9款样式迷人的CSS3漂亮的自定义checkbox复选框。这几款复选框样式很丰富，使用起来也比较方便。html5 二、CSS3自定义发光以前咱们分享过一些CSS3和HTML5实...
HTML+CSS第八课2：利用DIV+CSS制作一个百度搜索框和按钮的无缝对接
王迪
11-29 7170
知识点：盒子模型、CSS样式设置、form表单。 网页效果要求： 制作思路： 1、将百度logo+搜索框+按钮，作为整体放在一个div盒子里，通过设置div来控制他们在网页中的位置 2、涉及到表单，所以写一个form标签，将他们放在form标签中 3、搜索功能的实现，参考资料：利用表单标签制作一个百度搜索框 4、搜索框和按钮的样式，设置css属性，控制宽高、边框、背景颜色、文本颜色等 ...
[微信小程序]单选框以及多选框实例代码附讲解
热门推荐
a_靖的博客
12-08 3万+
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 效果图 <radio-group class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{k7}}" wx:key="index"&...
纯CSS3打造超炫复选框与单选框
在这个实例中，我们看到了一个基于CSS3的动画效果，当用户点击复选框或单选框时，会触发一个名为“click-wave”的关键帧动画，使选择框周围的圆圈逐渐扩大并淡化，营造出一种点击波纹的效果。 HTML部分展示了如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值