.prop('checked', false) 在单击标签后不会取消选中单选按钮答案

【问题标题】：.prop('checked', false) doesn't uncheck radio button after clicking on a label.prop('checked', false) 在单击标签后不会取消选中单选按钮
【发布时间】：2018-02-18 22:47:30
【问题描述】：

$(".label").click(function(){
    var id = $("#uncheck");
    var value = id.val();
    if(value == 'unchecked'){
      id.val('checked');
    } else {
      id.val('unchecked');
      id.prop('checked', false);
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class='label' for='uncheck'>uncheck</label>
<input class='input' type='radio' id='uncheck' value='unchecked'>

我一直试图取消选中单选按钮，但它不起作用，

【问题讨论】：

见这里：stackoverflow.com/questions/5665915/…
stackoverflow.com/questions/5665915/…的可能重复
@turmuka 不在我的代码中 id.prop('checked', false); 与 $('#uncheck').prop("checked", flase) 相同？
让标签事件处理程序执行与通常执行相反的操作在语义上是不正确的。您可能需要重新考虑，因为大多数人希望单击表单元素旁边的文本来切换或聚焦其状态。你在这里所做的只会让很多用户感到困惑。
Patrick 所说的，另外您可能想使用复选框来表示开/关。收音机通常用于选择“多选一”。

标签： javascript jquery

【解决方案1】：

您应该阻止默认操作（标签正在设置收音机）。您可以通过从事件处理程序返回 false 来做到这一点：

$(".label").click(function(){
    var id = $("#uncheck");
    if(!!id.prop('checked')) {
      id.prop('checked', false);
      return false;
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class='label' for='uncheck'>uncheck</label>
<input class='input' type='radio' id='uncheck' value='unchecked'>

或者使用event.preventDefault() method:

$(".label").click(function(e){
    var id = $("#uncheck");
    var value = id.val();
    if(value == 'unchecked'){
      id.val('checked');
    } else {
      e.preventDefault();
      id.val('unchecked');
      id.prop('checked', false);
    }  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class='label' for='uncheck'>uncheck</label>
<input class='input' type='radio' id='uncheck' value='unchecked'>

【讨论】：