取消选中单选按钮

Posted 2023-03-05

【中文标题】取消选中单选按钮

【英文标题】：Uncheck radiobutton

【发布时间】：2012-03-17 20:40:04

【问题描述】：

<input  type="radio" name="things" value="exam" />  exam
<input  type="radio" name="things" value="journey" /> journey


$("input[name=things]").click(function()
    if($(this).is(':checked'))
        $(this).removeAttr('checked')
    
)

这不起作用。我怎样才能让它工作？这是我希望它运行的方式：如果我单击选定的输入，那么应该取消选中它，但是如果我单击未选择的输入，那么应该选中它并取消选中其他输入。

直播：http://jsfiddle.net/syH46/

【问题讨论】：

***.com/a/6246260/55209 和 ***.com/questions/2589052/…

How to check/uncheck radio button on click?的可能重复

您好，您是说如果您单击文本考试或旅程，则应选择或取消选择相应的输入？

JQuery How to Uncheck A radio button的可能重复

【参考方案1】：

这应该可以解决您的问题：

How to uncheck a radio button?

要么（纯js）

this.checked = false;

或 (jQuery)

$(this).prop('checked', false);
// Note that the pre-jQuery 1.6 idiom was
// $(this).attr('checked', false);

希望有帮助:)

【讨论】：

如果您找到了问题，请将问题标记为重复，但不要从另一个答案中复制粘贴内容。

由于这个答案中解释的原因它不起作用：***.com/a/6246260/55209

我会检查选中的收音机并取消选中这个

抱歉，不知道该怎么做。现在就做，我的错。

【参考方案2】：

单选按钮的设计目的是始终选中组中的一个成员。如果有三个选项，那么您应该有三个单选按钮：

<input  type="radio" name="things" value="exam" id="things_exam">
<label for="things_exam">exam</label>

<input  type="radio" name="things" value="journey" id="things_journey">
<label for="things_journey">journey</label>

<input  type="radio" name="things" value="" id="things_neither" checked><!-- note checked attribute, this is the default, one member of the group should always be checked -->
<label for="things_neither">neither</label>

有一些方法可以解决这个问题，但并不可靠，而且并非不违反用户对 UI 工作方式的期望。

【讨论】：

无法取消选中已选中的收音机？

@GryzOshea — 请参阅我回答的最后一段。您无法可靠地做到这一点，即使可以，尝试也没有任何意义。

【参考方案3】：

http://jsfiddle.net/syH46/4/

使用实时函数。处理程序始终与事件关联。

【讨论】：

如果我再次点击选定的收音机，那么这仍然会被选中。应该取消选中

好吧，它不会那样工作的。只有当表单元素更新到服务器时，检查的值才会更新。

【参考方案4】：

我想出了这个代码：

var prev = ;
$("input[name=things]").click(function()
    if (prev && prev.value == this.value) 
        $(this).prop('checked', !prev.status);
    
    prev = 
        value: this.value,
        status: this.checked
    ;
);

不幸的是，我不得不使用额外的变量来存储选中的属性，因为当点击事件被触发时checked 属性总是为真。

http://jsfiddle.net/syH46/11/

【参考方案5】：

我知道这个问题是在 2 月份提出的，但我发现这个信息很有趣，我想与你分享：

单选按钮

单选按钮类似于复选框，只是当多个按钮共享相同的控件名称时，它们是互斥的：当一个“打开”时，所有其他具有相同名称的控件都将“关闭”。 INPUT 元素用于创建单选按钮控件。

如果在一组共享相同控件名称的单选按钮中没有最初为“on”的单选按钮，则选择哪个控件最初为“on”的用户代理行为是未定义的。笔记。由于现有实现对这种情况的处理方式不同，因此当前规范与 RFC 1866（[RFC1866] 第 8.1.2.4 节）不同，后者指出：始终检查一组单选按钮中的一个。如果一组单选按钮的任何元素都没有指定“已检查”，则用户代理必须首先检查该组的第一个单选按钮。

由于用户代理行为不同，作者应确保在每组单选按钮中，一个最初是“打开”的。

Source of the information

【参考方案6】：

这是一个不错的技巧：

<input type="radio" name="Name1" value="Value1" onmousedown="this.c=this.checked" onclick="if (this.c)  this.checked
= false " />

此代码应该作为 html 工作，但如果需要，您也可以在 javascript 或 jquery 中附加事件，并添加额外的逻辑。

【参考方案7】：

//I came up with something similar to the very first answer, over night.
//I use dirtyForms for JQuery inorder to monitor when I should forget to
//fill in some forms. https://github.com/snikch/jquery.dirtyforms

var prevFuncScope = ;

$("input[type=radio]").on('click', function(e)      
//$("input[type=radio]").click(function()  
  let prevBlockScope = 
    value: this.value,
    status: this.checked
  ;

  var $form = $('form#patient_entrance_form');
  var $submitResetButtons = $form.find('[type="reset"],[type="submit"]');

  //if ($(e).dirtyForms('isDirty')) $(e).dirtyForms('setClean'); //setClean();

  //console.log('form is = ' + $('form#patient_entrance_form').dirtyForms('isDirty'));
  //console.log('input[yes] = ' + $('#prev_chiro_care_yes').dirtyForms('isDirty'));
  //console.log('input[no] = ' + $('#prev_chiro_care_no').dirtyForms('isDirty'));

  //console.log($(this));

  if (prevBlockScope.status == prevFuncScope.status) 
    $("input[type=radio]").dirtyForms('setClean');
    //$('#prev_chiro_care_yes').dirtyForms('setClean'); $(e).dirtyForms('setClean');
    //$('#prev_chiro_care_no').dirtyForms('setClean');
    //console.log('form is = ');
    $(this).prop('checked', !prevBlockScope.status);    
    if ($('form#patient_entrance_form').dirtyForms('isDirty'))      
      //console.log('dirty1');
      $submitResetButtons.removeAttr('disabled');   
     else if(!$(e).dirtyForms('isDirty')) 
      //console.log('clean1');  
      $submitResetButtons.attr('disabled', 'disabled');   
    
   else if (prevFuncScope && prevFuncScope.value == this.value) 
    $("input[type=radio]").dirtyForms('setClean');
    //$('#prev_chiro_care_yes').dirtyForms('setClean'); // $(e).dirtyForms('setClean');
    //$('#prev_chiro_care_no').dirtyForms('setClean');
    //console.log('form is = ');
    $(this).prop('checked', prevBlockScope.status);
    if ($('form#patient_entrance_form').dirtyForms('isDirty')) 
      //console.log('dirty2');
      $submitResetButtons.removeAttr('disabled'); //
     else if(!$(e).dirtyForms('isDirty')) 
      //console.log('clean2');
      $submitResetButtons.removeAttr('disabled');
    
  
  prevFuncScope = 
    value: this.value,
    status: this.checked
    //isChecked: $('form#patient_entrance_form').dirtyForms('isDirty')
  ;
);