jquery表单radioc heckbox美化选择获取值效果-html代码-BFW代码库

jquery表单radioc heckbox美化选择获取值效果

代码语言：html

代码描述：jquery表单radioc heckbox美化选择获取值效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">


<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/lc_switch.css">
<style type="text/css" media="screen">
        body{margin: 0; padding: 0; background-color: #f1f1f1;}
        .inner-input{background-color: #fff;}
        .inner-input{position: relative; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 16px 16px; font-size: 16px; border-bottom: 1px solid #f2f2f2;}
        .inner-input label{height: 18px; width: 4.5em; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; margin-right: 16px; color: #333;}
        .to_chose{position: absolute; right: 15px; top: 10px; }
        .btn{position: fixed; width: 100%; height: auto; bottom: 0; border-top: 1px solid #f2f2f2; padding: 8px 16px; box-sizing: border-box; background-color: #fff;}
        button{width: 100%; line-height: 45px; font-size: 16px; border: none; border-radius: 3px; cursor: pointer; }
        button{background-color: #EC8336; color: #FFF;}
        
        .btn-groups button{background-color: #EC8336; margin: 0 16px; }
        .btn-groups button:hover{ background-color: #E5792A; }

        .btn-groups button.reset{background-color: #9E9E9E;}
        .btn-groups button.reset:hover{background-color: #BDBDBD;}
    </style>
</head>
<body>
<div class="inner-input">
<label class="fixed-w" style="width: 8em;">10.销售部</label>
<div class="to_chose">
<input type="checkbox" class="lcs_check" name="dept" value="10" autocomplete="off" />
</div>
</div>
<div class="inner-input">
<label class="fixed-w" style="width: 8em;">20.市场部</label>
<div class="to_chose">
<input type="checkbox" class="lcs_check" name="dept" value="20" autocomplete="off" />
</div>
</div>
<div class="inner-input">
<label class="fixed-w" style="width: 8em;">30.财务部</label>
<div class="to_chose">
<input type="checkbox" class="lcs_check" name=&qu.........完整代码请登录后点击上方下载按钮下载查看