Question

我有一个无线电输入组。如果选中了收音机，我再次点击它就会取消选中。

有没有办法获得广播onClick事件的先前状态？

<input name="options" type="radio" onClick="resetMeIfChecked()">
<input name="options" type="radio" onClick="resetMeIfChecked()">
<input name="options" type="radio" onClick="resetMeIfChecked()">

Answer 1

jQuery版

// bind to retrieve old status
$('input[type="radio"]').mousedown(function() { 
    // if it was checked before
    if(this.checked) {
        // bind event to reset state after click is completed
        $(this).mouseup(function() {  
            // bind param, because "this" will point somewhere else in setTimeout
            var radio = this;
            // apparently if you do it immediatelly, it will be overriden, hence wait a tiny bit
            setTimeout(function() { 
                radio.checked = false; 
            }, 5); 
            // don't handle mouseup anymore unless bound again
            $(this).unbind('mouseup');
        });
    }
});

但同样，这并不是如何使用单选按钮。我认为你可以更好地设置一个复选框，你可以取消选中除当前点击之外的所有其他复选框（因此总是最多选择1个）

A working example

Answer 2

非常简单。只需按照简单的例子和

var rdblength=document.formname.elementname.length;
alert('length='+rdblength);
for(i=0;i<rdblength;i++){
    document.formname.elementname[i].checked=false;
}

只需查找长度并检查每个索引= true / false。

请跟我说： - http://manojbardhan2009.blogspot.com

Answer 3

我有同样的问题并想出来了。上面的答案都没有完全符合我的要求 - 大多数都需要一个额外的按钮来重置收音机。目标是通过单击收音机本身取消选中收音机。

这是小提琴：http://jsfiddle.net/MEk5Q/1/

问题非常复杂，因为单播按钮值在click事件触发之前发生变化，因此当我们收听事件时，我们无法判断单选按钮是否已经被检查过。在这两种情况下，它都已经过检查。另一种方法是收听mousedown事件。与click不同，它在更改radio checked属性之前触发，但在事件处理程序中取消选中它不会给我们什么，因为在mouseup事件期间再次检查它。

我的答案是一个有点丑陋的解决方法，所以我一般不会向其他人提出建议，我可能会自己放弃它。有效但它涉及20ms的超时功能，在这种情况下我不喜欢它。

以下是代码说明：

$('input[type="radio"]').on('mousedown', function() {
    if (this.checked) { //on mousedown we can easily determine if the radio is already checked
        this.dataset.check = '1'; //if so, we set a custom attribute (in DOM it would be data-check="1")
    }
}).on('mouseup', function() {
    if (this.dataset.check) { //then on mouseup we determine if the radio was just meant to be unchecked
        var radio = this;
        setTimeout(function() {radio.checked = false;}, 20); //we give it a 20ms delay because radio checking fires right after mouseup event
        delete this.dataset.check; //get rid of our custom attribute
    }
});

作为超时功能，我可以使用一个字符串（更少写作）但据我所知它将是eval'ed。虽然我不相信eval函数，但我更喜欢匿名函数。

还有一件事 - 人们可以问为什么要将代码扩展到两个独立的事件处理程序中，而我们可以在mousedown上触发超时功能？那么，如果有人在收音机上按下鼠标并保持它几秒钟，甚至某人只是一个非常慢的人;）。通常，使用此解决方案，我们省略了mousedown和mouseup之间滞后的问题。

如果您需要有关dataset的更多信息，请参阅以下MDN参考： https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset 这个属性附带HTML5，可能不是跨浏览器，我想，所以如果你想要100％的兼容性，用任何其他包含数据的解决方案替换它，你可以命名它。

对于这里和那里的jQuery很抱歉，但我希望你对它很好 - 这样就容易了。

希望你会喜欢它。

Answer 4

此行为不是单选按钮的预期行为，我根本不推荐它。试着找到实现这一目标的另一种方法。使用其他小部件或其他选项重置字段值：

http://jsfiddle.net/marcosfromero/rRTE8/

Answer 5

试试这个：

function resetMeIfChecked(radio){           
    if(radio.checked && radio.value == window.lastrv){
        $(radio).removeAttr('checked');
        window.lastrv = 0;
    }
    else
        window.lastrv = radio.value;
}

<input value="1" name="options" checked="checked" type="radio" onClick="resetMeIfChecked(this)" />A
<input value="2" name="options" type="radio" onClick="resetMeIfChecked(this)" />B
<input value="3" name="options" type="radio" onClick="resetMeIfChecked(this)" />C

Answer 6

对于被迫瞄准那个微小的单选按钮，我从未感到高兴，因此我想出了一个更大的目标，并且可以在不诉诸任何会破坏HTML / JavaScript纯粹主义者的情况下关闭一个无线电组。 / p>

该技术依赖于不通过事件处理程序骚扰单选按钮，而是检查每个按钮的只读代理。所有内容都包含在纯JavaScript中，使用无线电组来选择一种类型的奶酪，或根本没有奶酪。

我故意在此示例中不使用样式来避免添加图层。转储按钮将告诉您三个检查状态是什么，因此使用它来询问点击无线电或文本输入元素后发生的事情。例如简单性我使用全局来记住前一个状态，但更优雅的方法是使用数据集，我在我的应用程序的实际代码中使用它。

<!DOCTYPE html>
<html>
<head>
  <title>Uncheck a radio button</title>
<script>
function attachEventListener(target, eventType, functionRef, capture) {
   "use strict";
   if (typeof target.addEventListener !== 'undefined') {
      // Most modern browsers
      target.addEventListener(eventType, functionRef, capture);
   } else if (typeof target.attachEvent !== 'undefined') {
      // IE
      target.attachEvent('on' + eventType, functionRef);
   } else {
      eventType = 'on' + eventType;
      if (typeof target[eventType] === 'function') {
         var oldListener = target[eventType];
         target[eventType] = function() {
            oldListener();
            return functionRef();
         };
      } else {
         target[eventType] = functionRef;
      }
   }
}
</script>
</head>

<body>
<form>
<input id="Cheddar-radio"  class="radio" type="radio" name="Cheeses-0" value="Cheddar Cheese"  tabindex="-1"></input>
<input id="Cheddar-text"                 type="text"  readonly         value="Cheddar Cheese"      tabindex="-1"></input><br>
<input id="Swiss-radio"    class="radio" type="radio" name="Cheeses-0" value="Swiss Cheese"    tabindex="-1"></input>
<input id="Swiss-text"                   type="text"  readonly         value="Swiss Cheese"    tabindex="-1"></input><br>
<input id="American-radio" class="radio" type="radio" name="Cheeses-0" value="American Cheese" tabindex="-1"></input>
<input id="American-text"                type="text"  readonly         value="American Cheese" tabindex="-1"></input><br><br>

<input onclick="dumpStates()" type="button" name="button" value="dump" tabindex="-1"></input>

</form>
<script>
window.onload = addRadioListeners;

function addRadioListeners() { // But do it on the -text elements.
   attachEventListener(document.getElementById('Cheddar-text') , 'mousedown', rememberCurrentState, false);
   attachEventListener(document.getElementById('Swiss-text')   , 'mousedown', rememberCurrentState, false);
   attachEventListener(document.getElementById('American-text'), 'mousedown', rememberCurrentState, false);

   attachEventListener(document.getElementById('Cheddar-text') , 'mouseup', checkNewState, false);
   attachEventListener(document.getElementById('Swiss-text')   , 'mouseup', checkNewState, false);
   attachEventListener(document.getElementById('American-text'), 'mouseup', checkNewState, false);
}

function dumpStates() {
   console.log(document.getElementById('Cheddar-radio').checked +
               ' ' + document.getElementById('Swiss-radio').checked +
               ' ' + document.getElementById('American-radio').checked);
}

var elementWasChecked; // Global - Could just as well use a dataset attribute
                       // on either the -radio or -text element and check it instead.

function rememberCurrentState(event) {
   var element;
   var radioElement;

   element = event.target;

   radioElement = document.getElementById(element.id.replace(/text/,'radio'));
   elementWasChecked = radioElement.checked;

   radioElement.checked = true;

}

function checkNewState(event) {
   var element;
   var radioElement;

   element = event.target;
   radioElement = document.getElementById(element.id.replace(/text/,'radio'));

   var currentState = radioElement.checked;

   if (elementWasChecked === true && currentState === true) {
      console.log('Changing ' + radioElement.id + ' to false.');
      radioElement.checked = false;
   }
};

</script>
</body>
</html>

如果单击单选按钮，它们将按预期工作。如果单击每个旁边的文本项，则它们是单选按钮的代理，但有一个例外。如果单击具有已选中的关联单选按钮的文本项，则将取消选中该项。因此，文本代理是事件触发的，而不是单选按钮。

额外的好处是你现在也可以点击更大的文本目标。

Answer 7

＆＃13;

$('input[type="radio"]').on("mousedown", function () {
  if (this.checked) {
    $(this).one("click", function () {
      this.checked = false; 
    });
  } 
});

＆＃13;

Answer 8

我用这个。您只需存储预点击值和！它变成值。

<input type=radio name="myoptions" value="1" 
   onmousedown="this.tag = this.checked;" onclick="this.checked = !this.tag;">

Answer 9

如果你想简化它并且不介意使用双击事件尝试这样的事情：

<input name="options" type="radio" ondblclick="this.checked=false;">

Answer 10

@jerjer的答案几乎是完美的，但如果广播组具有焦点，则也可以通过箭头切换广播（因此，鼠标按下事件是不够的）。 las，通过焦点偏移（ Tab ）激活无线电组时也会对其进行检查，这可能会不必要地检查一个选项。因此， space 应该取消选中焦点广播，就像复选框行为一样。

此代码修复了所有广播的问题（大多数功劳仍归于耶尔）：

window.addEventListener("DOMContentLoaded", function() {
  var radios = document.querySelectorAll("input[type=radio]");
  for(var i=0; i<radios.length; ++i) {
    radios[i].addEventListener("click", function(e) {
      if(e.target.checked && e.target.value == window.lastrv){
        e.target.checked = false;
        window.lastrv = 0;
      }
      else
        window.lastrv = e.target.value;
    });

    radios[i].addEventListener("keypress", function(e) {
      if(e.keyCode==32) e.target.click();
    });
  }
});

使用javascript检查/取消选中无线电输入

10 个答案: