input的radio取消，radio也可以和checkbox的特性一样

最近遇到这样的一个需求，radio让它可以二选一，如果再点击选中的那个就可以取消掉，这样说有可能有些人还是不能理解，下面我上图阐述需求：

职工基本医疗和城居医疗二选一，职工基本养老和城居养老二选一，假如职工基本养老和城居医疗已经选中了，但是我想只要一个职工基本养老或者是城居医疗，咋办？想办法要取消一个，因此引出要取消radio选中状态。不多说上代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title>radio取消</title>
    <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('input[name="radioInline"]').click(function(){
            $(this).data('checked',!$(this).data("checked"));
               $(this).prop('checked',$(this).data("checked"));
               $("input[name=radioInline]").not(this).data('checked',false);
        })
    })
    </script>
    <style type="text/css">
        /*form*/

    .form-flex {
        overflow: hidden;
        margin: 0 .24rem;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0 0.05rem 0.13rem 0 rgba(22, 0, 22, 0.06);
        border-radius: .1rem;
        color: #fff;
    }

     .column {
        border-bottom: 0.02rem solid #f2f2f2;
        min-height: 4rem;
        padding: 0.1rem 0.2rem;
    }

    .span-color{
        font-size: .32rem;
        color: #1797eb !important;
    }
    .form-flex .column .label {
        color: #999;
    }
    .form-flex .column .info {
        color: #333;
    }

    /*radio单选框*/
    .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: 20px;
      height: 20px;
      left: 0;
      margin-left: -20px;
      margin-top: -10px;
      border: 1px solid #dedede;
      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: 12px;
      height: 12px;
      left: -15px;
      top: -5px;
      border-radius: 50%;
      background-color: #1797eb ;
      -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"]:checked + label::before {

        border: 1px solid #1797eb;

    }
    .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 input[type="radio"]:disabled + label {
      opacity: 0.65;
    }
    .radio input[type="radio"]:disabled + label::before {
      cursor: not-allowed;
    }
    /*弹性布局*/
    .flex-row{
        display:box;  /*（伸缩盒最老版本）*/
          display:-webkit-box;  /* iOS 6-, Safari 3.1-6 */
         display:-webkit-flex; /* Chrome */
          display:-moz-box;     /* Firefox 19 */
         display:-ms-flexbox;   
          display:flex;  /*flex容器*/

          -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row; 
        flex-direction:row;  
    }
    .flex-col{
        display:box;  /*（伸缩盒最老版本）*/
          display:-webkit-box;  /* iOS 6-, Safari 3.1-6 */
         display:-webkit-flex; /* Chrome */
          display:-moz-box;     /* Firefox 19 */
         display:-ms-flexbox;   
          display:flex;  /*flex容器*/

          -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column; 
        flex-direction:column;  
    }
    .col-center{
        -webkit-align-items:center;
        -moz-align-items:center;
        -ms-align-items:center;
        -o-align-items:center;
        align-items:center;
    }
    </style>
</head>
<body>
    <div class="column flex-row col-center radio">
        <div class="info">男</div>
        <div class="radio radio-info">
            <input type="radio" id="inlineRadio1" value="male" name="radioInline" data-checked="">
            <label for="inlineRadio1"> </label>
        </div>
 
    </div>
    <div class="column flex-row col-center radio">
        <div class="info">女</div>
        <div class="radio radio-info">
            <input type="radio" id="inlineRadio2" value="female" name="radioInline" data-checked="">
            <label for="inlineRadio2"> </label>
        </div>
 
    </div>
</body>
</html>

radio样式不好看所以加了点好看的样式，哪些有写的不好的地方或者有更简便的方法，请赐教！

posted @ 2017-10-31 15:33  zenderdi  阅读(795)  评论(0)    收藏  举报