通過使用jQuery單擊標簽取消選中已選中的單選按鈕

Question

我需要使用jQuery取消選中已檢查的單選按鈕。 按鈕本身是隱藏的，所以我使用標簽上的點擊來觸發這個。 到目前為止，我有：

HTML

<form>
  <h4>Where would you like to work?</h4>
  <div class="radio-holder">
    <input id="form1_areas1" name="areas" type="radio" value="area/london">
    <label for="form1_areas1">London</label>
  </div>
  <div class="radio-holder">
    <input id="form1_areas2" name="areas" type="radio" value="area/west-midlands">
    <label for="form1_areas2">West Midlands</label></div>
</form>

SCSS

form {
  max-width: 500px;
  margin: 0 auto;
  padding-top: 20px;
}
div.radio-holder {
  padding: 10px;
}
input[type="radio"] {
 display:none;
 &:checked+label {
  border-bottom: 2px solid #222222;
  padding-bottom: 0px;
 }
}

JQUERY

$(document).ready(function(){
  $("form input[type='radio']:checked + label").click(function(){
    $(this).prev().prop( "checked", false );
  });
});

這里有一個CodePen

但這並不是取消選中單選按鈕。 我知道這不是單選按鈕的標准功能，但是如果需要，我需要用戶能夠將單選按鈕集還原為未選擇狀態，同時還限制他們從選項集中選擇一個。 任何幫助非常感謝。

干杯

麥克風

Answer 1

要啟用/禁用相同的無線電，您必須使用event.preventDefault()來防止默認行為（單擊標簽時啟用復選框，因此檢查的prop將始終設置為true）並使語法無線電啟用/禁用，如下面的片段：

 $(document).ready(function(){ $("label").click(function(e){ e.preventDefault(); $check = $(this).prev(); if($check.prop('checked')) $check.prop( "checked", false ); else $check.prop( "checked", true ); //console.log($check.prop("checked")); }); }); 

 form { max-width: 500px; margin: 0 auto; padding-top: 20px; } div.radio-holder { padding: 10px; } input[type="radio"] { display:none; } input[type="radio"]:checked+label { border-bottom: 2px solid #222222; padding-bottom: 0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <h4>Where would you like to work?</h4> <div class="radio-holder"> <input id="form1_areas1" name="areas" type="radio" value="area/london"> <label for="form1_areas1">London</label> </div> <div class="radio-holder"> <input id="form1_areas2" name="areas" type="radio" value="area/west-midlands"> <label for="form1_areas2">West Midlands</label></div> </form> 

Answer 2

你可以使用下一個技巧：
- 添加data-num屬性。
- 每次點擊都使用data-num來檢查/取消選中單選按鈕。
希望能幫助到你：

 $(document).ready(function(){ $("input").click(function(){ $("input").not(this).attr("data-num", 1); var data = $(this).attr("data-num") if(data==1){ data = 2 $(this).attr("data-num", data); return; } if(data==2){ data = 1 $(this).prop('checked', false); $(this).attr("data-num", data); return; } }) }) 

 form { max-width: 500px; margin: 0 auto; padding-top: 20px; } div.radio-holder { padding: 10px; } input[type="radio"] { display:none; } input[type="radio"]:checked+label { border-bottom: 2px solid #222222; padding-bottom: 0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <h4>Where would you like to work?</h4> <div class="radio-holder"> <input id="form1_areas1" name="areas" type="radio" value="area/london" data-num="1"> <label for="form1_areas1">London</label> </div> <div class="radio-holder"> <input id="form1_areas2" name="areas" type="radio" value="area/west-midlands" data-num="1"> <label for="form1_areas2">West Midlands</label></div> </form>