HTML
CSS
JavaScript
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>选择功能 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="http://lyear.itshubao.com/iframe/css/bootstrap.min.css" rel="stylesheet">
<link href="http://example.itshubao.com/demo/css/materialdesignicons.min.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/iframe/css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="container-fluid">
  
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header"><h4>选择功能</h4></div>
        <div class="card-body">
          
          <p>使用栅格，这里父元素固定了宽度，也可以不用。</p>
          <div class="choose-box row clearfix">
            <div class="col-xs-4">
              <div class="choose-item m-b-15">
                <input type="radio" name="test" value="1" />
                <i class="mdi mdi-alert-outline fa-3x"></i>
                <p>诈骗电话</p>
              </div>
            </div>
            <div class="col-xs-4">
              <div class="choose-item m-b-15">
                <input type="radio" name="test" value="2" />
                <i class="mdi mdi-account-outline fa-3x"></i>
                <p>房产中介</p>
              </div>
            </div>
            <div class="col-xs-4">
              <div class="choose-item m-b-15">
                <input type="radio" name="test" value="3" />
                <i class="mdi mdi-bullhorn fa-3x"></i>
                <p>广告推销</p>
              </div>
            </div>
            <div class="col-xs-4">
              <div class="choose-item m-b-15">
                <input type="radio" name="test" value="4" />
                <i class="mdi mdi-motorbike fa-3x"></i>
                <p>快递外卖</p>
              </div>
            </div>
            <div class="col-xs-4">
              <div class="choose-item m-b-15">
                <input type="radio" name="test" value="5" />
                <i class="mdi mdi-car-side fa-3x"></i>
                <p>出租车</p>
              </div>
            </div>
            <div class="col-xs-4">
              <div class="choose-item m-b-15">
                <input type="radio" name="test" value="6" />
                <i class="mdi mdi-dots-horizontal fa-3x"></i>
                <p>更多</p>
              </div>
            </div>
          </div>
          
          
          <div class="form-group">
            <button class="btn btn-default" id="getChose">获取选中值</button>
            <pre class="m-t-10" id="console"></pre>
          </div>
          
          
          <p>使用ul li，设置最大宽度，这里父元素也设置50%宽度，也可以不用。</p>
          <div class="w-50">
            <ul class="list-inline recharge-test">
              <li>
                <input type="radio" name="test2" value="6" />
                <i class="mdi mdi-alert-outline fa-3x"></i>
                <p>60个金币</p>
              </li>
              <li>
                <input type="radio" name="test2" value="12" />
                <i class="mdi mdi-account-outline fa-3x"></i>
                <p>120个金币</p>
              </li>
              <li>
                <input type="radio" name="test2" value="30" />
                <i class="mdi mdi-bullhorn fa-3x"></i>
                <p>300个金币</p>
              </li>
              <li>
                <input type="radio" name="test2" value="68" />
                <i class="mdi mdi-motorbike fa-3x"></i>
                <p>730个金币</p>
              </li>
              <li>
                <input type="radio" name="test2" value="108" />
                <i class="mdi mdi-car-side fa-3x"></i>
                <p>1160个金币</p>
              </li>
              <li>
                <input type="radio" name="test2" value="158" />
                <i class="mdi mdi-dots-horizontal fa-3x"></i>
                <p>1700个金币</p>
              </li>
            </ul>
          </div>  
          
          
          <div class="form-group">
            <button class="btn btn-default" id="getChose2">获取选中值</button>
            <pre class="m-t-10" id="console2"></pre>
          </div>
          
          
        </div>
      </div>
    </div>
    
  </div>
  
</div>

<script type="text/javascript" src="http://lyear.itshubao.com/iframe/js/jquery.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/js/bootstrap.min.js"></script>
</body>
</html>
CSS
/* 使用栅格 */
.choose-box {
    width: 400px;
}
.choose-box .choose-item {
    cursor: pointer;
    background-color: #F7F7F7;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 5px 15px;
    text-align: center;
}
.choose-box .choose-item input {
    display: none;
}
.choose-box .choose-item.active {
    color: #48b0f7
}

/* 使用ul li */
.recharge-test li {
    min-width: 110px;
    cursor: pointer;
    margin: 0px 5px 10px;
    padding: 5px 15px;
    color: #4d5259;
    text-align: center;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #f7f7f7;
}
.recharge-test li.active {
    color: #48b0f7;
}
.recharge-test li input {
    display: none;
}
JavaScript
$(document).ready(function(){
    /* 使用栅格 */
    $(document).on('click', '.choose-item', function() {
        $(this).addClass('active').parent().siblings().find('.choose-item').removeClass('active');
        $(this).parents('.choose-box').siblings().find('input').prop('checked', 0);
        $(this).find('input').prop('checked', 1);
    });
    
    $('#getChose').on('click', function() {
        var test = $('input[name="test"]:checked').val();
        if ((typeof(test) =='undefined')) {
            test = '您未做选择';
        }
        $('#console').append(test+'\n');
    });
    
    /* 使用ul li */
    $(document).on('click', '.recharge-test li', function() {
        $(this).addClass('active').siblings().removeClass('active');
        $(this).siblings().find('input').prop('checked', 0);
        $(this).find('input').prop('checked', 1);
    });
    
    $('#getChose2').on('click', function() {
        var amount = $('input[name="test2"]:checked').val();
        if ((typeof(amount) =='undefined')) {
            amount = '您未做选择';
        }
        $('#console2').append(amount+'\n');
    });
});