堆栈内存溢出
  繁体   English   中英

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

[英]check/uncheck radio input with javascript

 原文  2011-06-06 12:03:19  4   9    javascript/ html

问题描述

我有一个无线电输入组。 如果选中了收音机并且我再次单击它，它将变为未选中。

有没有办法获得收音机onClick事件的先前状态？

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

9 个解决方案

解决方案1
 6  2011-06-06 13:04:08

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

一个工作示例

解决方案2
 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

解决方案3
 2  2013-07-17 16:27:54

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

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

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

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

下面是代码解释：

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

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

还有一件事——有人可能会问，为什么我们可以在 mousedown 时触发超时 function 时将代码分散到两个单独的事件处理程序中？ 好吧，如果有人在收音机上按下鼠标并按住它几秒钟，或者甚至某人只是一个非常慢的人怎么办；）。 通常，使用此解决方案，我们省略了mousedown和mouseup之间的滞后问题。

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

很抱歉 jQuery 在这里和那里，但我希望你能接受它 - 这样更容易。

希望你会喜欢它。

解决方案4
 2  2017-05-10 10:29:54

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

解决方案5
 1  2013-07-25 19:23:46

对于被迫瞄准那个微小的单选按钮，我从来没有太高兴过，所以我想出了一个更大的目标和一种关闭收音机组的方法，而无需采取任何会扰乱 HTML / JavaScript 纯粹主义者的事情。

该技术完全不依赖于通过事件处理程序来干扰单选按钮，而是检查每个单选按钮的只读代理。 一切都包含在下面的纯 JavaScript 中，使用无线电组到 select 一种奶酪，或者根本没有奶酪。

在此示例中，我故意不使用样式以避免添加的图层。 转储按钮会告诉你三个选中状态是什么，所以用它来询问在点击收音机或文本输入元素后发生了什么。 例如简单性，我使用全局来记住以前的 state，但更优雅的方法是使用数据集，我在应用程序的实际代码中使用它。

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

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

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

解决方案6
 1  2019-03-26 14:03:14

我用这个。 您只需存储点击前的值和。 它进入价值。

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

解决方案7
 1  2011-06-06 12:13:43

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

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

解决方案8
 1  2011-06-06 13:17:01

尝试这个：

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

解决方案9
 0  2013-06-27 19:42:50

如果您想让它变得简单并且不介意使用双击事件，请尝试以下操作：

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 选中/取消选中单选按钮 JavaScript 单击标签时选中/取消选中无线电输入 使用 javascript 和 html 选中/取消选中单选按钮 如何在JavaScript中检查/取消选中动态单选按钮？ 选中/取消选中未在AMP上正确更新的无线电输入字段 如何使用javascript检查/取消选中单选按钮 单选按钮检查/取消选中基于另一个无线电组检查/取消选中 单选按钮上的条件是否选中/取消选中 如何检查输入是否为收音机-javascript 检查/取消检查输入不起作用
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM