Question

<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/

Answer 1

我已经提出了这个代码：

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/

Answer 2

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

单选按钮


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

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

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

Source of the information

Answer 3

这是一个不错的黑客：

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

此代码应该用作HTML，但如果需要，您还可以使用其他逻辑将事件附加到javascript或jquery中。

Answer 4

单选按钮的设计使得始终检查该组中的一个成员。如果有三个选项，那么你应该有三个单选按钮：

<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>

有很多方法可以解决这个问题，但不能可靠，并且不会违反用户对用户界面如何运作的期望。

Answer 5

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

使用实时功能..处理程序始终依附于事件。

Answer 6

//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')
  };
});

Answer 7

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

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);

希望有所帮助：）

取消选中单选按钮

7 个答案: