label包围input时，绑定的事件会执行两次，

return false或者判断event.target.tagName来判断点击的元素
html

<label class="radio-inline">
<input type="radio" name="sex" id="inlineRadio1" value="1"> 
<span>男</span>
</label>

js部分

    $(".radio-inline").on("click",function(e){
        if(e.target.tagName !== "input"){
             return false
         }
         //要执行的代码
    })

觉得radio不好看，想做成类似按钮一样的东西

image.png

<div>
用户性别:
      <label class="radio-inline">
      <input type="radio" name="sex" id="inlineRadio1" value="1"> 
      <span class="sex-btn">男</span>
   </label>
   <label class="radio-inline">
      <input type="radio" name="sex" id="inlineRadio2" value="2"> 
      <span class="sex-btn">女</span>
  </label>
  <label class="radio-inline">
    <input type="radio" name="sex" id="inlineRadio2"  value="3" checked> 
    <span class="sex-btn">保密</span>
  </label>
</div>

css部分

.sex-btn{
    background: #fff;
    display:inline-block;
    padding:5px 10px;
    border-radius:5px;
    border:1px solid #ccc;
}
.radio-inline.active > .sex-btn{
    background: #22A1D6;
    color:#fff
}
.sex-radio-container>.radio-inline{
    padding:0px; 
}
.radio-inline input{
    display:none;
}

js部分,使用jquery

    $(".radio-inline").on("click",function(e){
        if(e.target.tagName === "INPUT"){//点击时首先是点击span，所以要进行判断，防止多次执行
            let fatherEle = $(e.target).parent();s
            fatherEle.addClass("active").siblings().removeClass("active"); //给自己父元素加上active去除父元素其兄弟元素的active
         }
    })

使用jquery获取被选中的值

$("input[name='sex']:checked").val()