使用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。

但是这并没有取消选中单选按钮。我知道这不是单选按钮的标准功能，但是如果需要，我需要用户能够将一组单选按钮恢复为未选择状态，同时限制他们从选项集中选择一个。非常感谢任何帮助。

谢谢，

Mike

- Mike Harrison

---

请检查这个链接：https://codepen.io/anon/pen/eeBexV - Vasu Kuncham

Answer 1

要启用/禁用相同的单选按钮，您必须使用event.preventDefault()来防止默认行为（在单击标签时启用复选框，因此将始终设置checked属性为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>

- Bourbia Brahim

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>

- SilverSurfer