JSFiddle - React, Tailwind, and code Playground

by 亮 薛

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/css/flat-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/js/flat-ui.min.js"></script>
<form class="form form-horizontal">
  <div class="form-body">
    <h4 class="form-section">车辆信息等级</h4>
<!--     <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <label for="salesDepartment" class="col-md-3 control-label">营业部</label>
          <div class="col-md-9">
            <input type="input" class="form-control" id="salesDepartment" placeholder="">
          </div>
        </div>
      </div>
    </div> -->
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <label for="salesDepartment" class="col-md-3 control-label">车辆属性</label>
          <div class="col-md-9">
              <label class="radio radio-inline">
                <input type="radio" name="carSize" checked data-true-class=".car-size-info.big" data-false-class=".car-size-info" value="1">
                <span class="label label-sm label-success inline-block "> 大型 </span>
              </label>
              <label class="radio radio-inline">
                <input type="radio" name="carSize" data-true-class=".car-size-info.middle" data-false-class=".car-size-info" value="2">
                <span class="label label-sm label-success inline-block "> 中型 </span>
              </label>
              <label class="radio radio-inline">
                <input type="radio" name="carSize" data-true-class=".car-size-info.small" data-false-class=".car-size-info" value="3">
                <span class="label label-sm label-success inline-block "> 小型 </span>
              </label>
          </div>
        </div>
      </div>
   ...

CSS

.form .form-section {
  margin: 30px 0px 30px 0px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e7ecf1;
}

.display-hide {
  display: none;
}

JavaScript

$(function(){
    $(':radio').radiocheck();
    $(':radio[name="carSize"]').change(function(event){
    	var $target = $(this); // $target: 被选中的按钮
      
    	var trueClass = $target.attr('data-true-class');		// data-true-class: 当前元素被选中时，需要显示的那些元素，它们的class，通过此属性，显示这些元素
      var falseClass = $target.attr('data-false-class');  // data-false-class: 当前元素被选中时，需要隐藏的那些元素，它们的class，通过此属性，隐藏这些元素
      
      console.info(falseClass);
      console.info(trueClass);
      
      $(falseClass).hide();
      $(trueClass).show();
    });
 });