label包圍input時(shí)，綁定的事件會(huì)執(zhí)行兩次，

return false或者判斷event.target.tagName來判斷點(diǎn)擊的元素
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
         }
         //要執(zhí)行的代碼
    })

覺得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"){//點(diǎn)擊時(shí)首先是點(diǎn)擊span，所以要進(jìn)行判斷，防止多次執(zhí)行
            let fatherEle = $(e.target).parent();s
            fatherEle.addClass("active").siblings().removeClass("active"); //給自己父元素加上active去除父元素其兄弟元素的active
         }
    })

使用jquery獲取被選中的值

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