javascript - 如何通过单击取消选中单选按钮？

Question

与复选框不同，用户无法在单击单选按钮后取消选择它们。有什么方法可以使用 Javascript 以编程方式切换它们？最好不使用 jQuery。

score 98 · Accepted Answer

您可以将 HTML 对象的属性设置checked为false：

document.getElementById('desiredInput').checked = false;

例子

Plain JavaScript：

var radios = document.getElementsByTagName('input');
for(i=0; i<radios.length; i++ ) {
    radios[i].onclick = function(e) {
        if(e.ctrlKey || e.metaKey) {
            this.checked = false;
        }
    }
}

<input type="radio" name="test" value="1" />
<input type="radio" name="test" value="2" checked="checked" />
<input type="radio" name="test" value="3" />

jQuery：

$('input').click(function(e){
    if (e.ctrlKey || e.metaKey) {
        $(this).prop('checked', false);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="test" value="1" />
<input type="radio" name="test" value="2" checked="checked" />
<input type="radio" name="test" value="3" />

按住`Ctrl`(`⌘</kbd> on mac) key to uncheck.`

score 31 · Accepted Answer

单选按钮旨在用于组中，由它们共享相同的name属性定义。然后单击其中一个取消选择当前选定的一个。为了允许用户取消他所做的“真实”选择，您可以包含一个对应于空选择的单选按钮，例如“不知道”或“无答案”。

如果您想要一个可以选中或取消选中的按钮，请使用复选框。

可以（但通常不相关）取消选中 JavaScript 中的单选按钮，只需将其checked属性设置为 false，例如

<input type=radio name=foo id=foo value=var>
<input type=button value="Uncheck" onclick=
"document.getElementById('foo').checked = false">

score 22 · Accepted Answer

这是我的答案（虽然我是用 jQuery 做的，但只是为了选择元素以及添加和删除一个类，所以你可以很容易地用纯 JS 选择器和纯 JS 添加属性替换它）

<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>

$(document).on("click", "input[name='radioBtn']", function(){
    thisRadio = $(this);
    if (thisRadio.hasClass("imChecked")) {
        thisRadio.removeClass("imChecked");
        thisRadio.prop('checked', false);
    } else { 
        thisRadio.prop('checked', true);
        thisRadio.addClass("imChecked");
    };
})

score 17 · Accepted Answer

取消选中收音机如何（不）工作

你不能轻易地通过 , 实现 uncheck if(this.checked) this.checked = false（如果你真的想，请看最后的黑客方式），因为事件按以下顺序触发：

mousedown或者keydown
mouseup或者keyup
如果没有选中，现在设置选中的属性
click
input（仅当状态改变时）
change（仅当状态改变时）

现在在哪种情况下执行提到的取消选中？

mouseup或mousedown：然后在步骤 3 中将值设置回 true 并且更改和输入事件甚至不会触发，因为在序列中调用它们时状态没有改变 - 所以你不能在这里取消选中它
click：那么状态总是假的，输入和更改也不会触发 - 所以你不能检查它
input或change：当状态没有改变并且单击选定元素不会改变状态时它不会触发 - 所以你不能在这里做任何有用的事情

天真的方式

正如您可以从上面的序列中学到的那样，方法是：

读取之前的状态mouseup
将状态设置click为先前状态的否定

如果要将先前的状态存储在 data 属性中，请记住它保存为string，而 checked 属性是boolean。所以你可以像这样实现它：

radio.onmouseup = function() { this.dataset.checked = this.checked? 1 : ""; }
radio.onclick = function() { this.checked = !this.dataset.checked; }

它似乎有效，但由于以下原因，您不应该这样做：

用户可以在mousedown其他地方，然后将鼠标悬停在单选按钮上方，然后mouseup：在这种情况下 mouseup 触发并且单击不会
用户可以Tab用来聚焦无线电组，然后arrows更改：mouseup 不触发，click 不触发

正确的方法

还有另一个问题：动态添加的单选按钮。有两种方法：

element.appendChild(radio)- 如果您在DOMContentLoaded事件中对所有无线电启用取消选择，则此动态添加的无线电不受影响
element.innerHTML+= '<input type="radio">'- 有效地替换元素的 HTML 内容并在其中重新创建 DOM - 因此所有事件侦听器都被丢弃

为了解决（2），我推荐onclick content attribute。请注意，element.onclick = fn和element.setAttribute("onclick", "fn()")是两个不同的东西。另请注意，onclick每次用户激活无线电时都会触发，无论他使用什么界面。

还有一个问题：如果您启用取消选择，那么您还应该启用切换Space以模仿复选框的行为。以下代码解决了所有提到的问题：

function deselectableRadios(rootElement) {
  if(!rootElement) rootElement = document;
  if(!window.radioChecked) window.radioChecked = {};
  window.radioClick = function(e) {
    const obj = e.target, name = obj.name || "unnamed";
    if(e.keyCode) return obj.checked = e.keyCode!=32;
    obj.checked = window.radioChecked[name] != obj;
    window.radioChecked[name] = obj.checked ? obj : null;
  }
  rootElement.querySelectorAll("input[type='radio']").forEach( radio => {
    radio.setAttribute("onclick", "radioClick(event)");
    radio.setAttribute("onkeyup", "radioClick(event)");
  });
}

deselectableRadios();

<label><input type="radio" name="tag1">one</label>
<label><input type="radio" name="tag1">two</label>
<label><input type="radio" name="tag1">three</label>

<br><br>

<label><input type="radio" name="tag2">one</label>
<label><input type="radio" name="tag2">two</label>
<label><input type="radio" name="tag2">three</label>

现在，您可以deselectableRadios()随时调用动态添加内容，并且在收音机上多次调用它不会破坏它。您还可以指定rootElement仅更新 HTML DOM 的子树并让您的 Web 更快。如果不喜欢全局状态，可以使用hacker方式：

黑客之道

setTimeout关键是在检查属性设置后滥用mouseup调用它：

function deselectable() {
  setTimeout(checked => this.checked = !checked, 0, this.checked);
}

现在您可以取消选择任何单选按钮：

radio.onmouseup = deselectable;

但是这个简单的单行只需要点击就可以工作，并不能解决上面提到的问题。

被遗弃的未来

可取消选择的单选基本上是复选框，其中只能选中组中的一个。有一个有希望的直接希望将其编码为

<input type="checkbox" name="foo" style="appearance: radio">

但是，该radio值现在被定义为compat-auto类型，被视为auto，即没有视觉变化。看来以后这里不会有什么进展了。

score 16 · Accepted Answer

封装在一个插件中

限制：

需要表单元素
以编程方式更改单选按钮时必须触发点击事件

(function($) {
  $.fn.uncheckableRadio = function() {
    var $root = this;
    $root.each(function() {
      var $radio = $(this);
      if ($radio.prop('checked')) {
        $radio.data('checked', true);
      } else {
        $radio.data('checked', false);
      }
        
      $radio.click(function() {
        var $this = $(this);
        if ($this.data('checked')) {
          $this.prop('checked', false);
          $this.data('checked', false);
          $this.trigger('change');
        } else {
          $this.data('checked', true);
          $this.closest('form').find('[name="' + $this.prop('name') + '"]').not($this).data('checked', false);
        }
      });
    });
    return $root;
  };
}(jQuery));

$('[type=radio]').uncheckableRadio();
$('button').click(function() {
  $('[value=V2]').prop('checked', true).trigger('change').trigger('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <label><input name="myRadio" type="radio" value="V1" /> R1</label>
  <label><input name="myRadio" type="radio" value="V2" /> R2</label>
  <label><input name="myRadio" type="radio" value="V3" /> R3</label>
  <button type="button">Change R2</button>
</form>

score 11 · Accepted Answer

getElementsByName( ' ' );由于单选按钮主要用于组中，因此在您的脚本标签中获取它们要容易得多。这将返回一个数组，在每个数组子节点上放置一个事件监听器并设置检查状态。看看这个样本。

var myRadios = document.getElementsByName('subscribe');
var setCheck;
var x = 0;
for(x = 0; x < myRadios.length; x++){

    myRadios[x].onclick = function(){
        if(setCheck != this){
             setCheck = this;
        }else{
            this.checked = false;
            setCheck = null;
    }
    };

}

本指南解释了代码如何与可视化演示一起工作。

score 6 · Accepted Answer

虽然它是用 javascript 来询问的，但 jquery 的适应是微不足道的......使用这种方法，您可以检查“null”值并传递它......

var checked_val = "null";
$(".no_option").on("click", function(){
  if($(this).val() == checked_val){
    $('input[name=group][value=null]').prop("checked",true);
    checked_val = "null";
  } else {
    checked_val = $(this).val();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="group" class="no_option" value="0">option 0<br>
<input type="radio" name="group" class="no_option" value="1">option 1<br>
<input type="radio" name="group" class="no_option" value="2">option 2<br>
<input type="radio" name="group" class="no_option" value="3">option 3<br>
<input type="radio" name="group" class="no_option" value="4">option 4<br>
<input type="radio" name="group" class="no_option" value="5">option 5<br>
<input type="radio" name="group" class="no_option" value="6">option 6<br>
<input type="radio" name="group" class="no_option" value="null" style="display:none">

score 5 · Accepted Answer

老问题，但人们一直来自谷歌，OP 最好在没有 jQuery 的情况下询问，所以这是我的镜头。

甚至应该在 IE 9 上工作

// iterate using Array method for compatibility
Array.prototype.forEach.call(document.querySelectorAll('[type=radio]'), function(radio) {
	radio.addEventListener('click', function(){
		var self = this;
		// get all elements with same name but itself and mark them unchecked
		Array.prototype.filter.call(document.getElementsByName(this.name), function(filterEl) {
			return self !== filterEl;
		}).forEach(function(otherEl) {
			delete otherEl.dataset.check
		})

		// set state based on previous one
		if (this.dataset.hasOwnProperty('check')) {
			this.checked = false
			delete this.dataset.check
		} else {
			this.dataset.check = ''
		}
	}, false)
})

<label><input type="radio" name="foo" value="1"/>foo = 1</label><br/>
<label><input type="radio" name="foo" value="2"/>foo = 2</label><br/>
<label><input type="radio" name="foo" value="3"/>foo = 3</label><br/>
<br/>
<label><input type="radio" name="bar" value="1"/>bar = 1</label><br/>
<label><input type="radio" name="bar" value="2"/>bar = 2</label><br/>
<label><input type="radio" name="bar" value="3"/>bar = 3</label><br/>

score 3 · Accepted Answer

我来这里是因为我有同样的问题。我想向用户展示这些选项，同时将选项留空。尽管可以使用会使后端复杂化的复选框来显式编码。

让用户 Control+click 几乎与让他们通过控制台取消选中它一样好。抓住 mousedown 为时过早，而 onclick 为时已晚。

好吧，终于有一个解决方案了！只需将这几行放在页面上一次，您就可以为页面上的所有单选按钮制作它。您甚至可以摆弄选择器来自定义它。

window.onload = function() {
  document.querySelectorAll("INPUT[type='radio']").forEach(function(rd) {
    rd.addEventListener("mousedown", function() {
      if(this.checked) {
        this.onclick=function() {
          this.checked=false
        }
      } else {
        this.onclick=null
      }
    })
  })
}

<input type=radio name=unchecksample> Number One<br>
<input type=radio name=unchecksample> Number Two<br>
<input type=radio name=unchecksample> Number Three<br>
<input type=radio name=unchecksample> Number Four<br>
<input type=radio name=unchecksample> Number Five<br>

score 2 · Accepted Answer

我就是这样来的：

function uncheck_radio_before_click(radio) {
    if(radio.prop('checked'))
        radio.one('click', function(){ radio.prop('checked', false); } );
}
$('body').on('mouseup', 'input[type="radio"]', function(){
    var radio=$(this);
    uncheck_radio_before_click(radio);
})
$('body').on('mouseup', 'label', function(){
    var label=$(this);
    var radio;
    if(label.attr('for'))
        radio=$('#'+label.attr('for')).filter('input[type="radio"]');
    else
        radio=label.children('input[type="radio"]');
    if(radio.length)
        uncheck_radio_before_click(radio);
})

http://jsfiddle.net/24vft2of/2/

score 2 · Accepted Answer

在单选按钮对象创建代码中包括以下三行：

  obj.check2 = false;    // add 'check2', a user-defined object property
  obj.onmouseup = function() { this.check2 = this.checked };
  obj.onclick = function() { this.checked = !this.check2 };

score 2 · Accepted Answer

纯 JavaScript 中的完整示例：

box.onmouseup = function() {
  var temp = this.children[0];
  if (temp.checked) {
    setTimeout(function() {
      temp.checked = false;
    }, 0);
  }
}

<label id='box' style='margin-right: 1em;'>
  <input type='radio' name='chk_préf_méd_perso' value='valeur'>
  libellé
</label>

score 2 · Accepted Answer

我很惊讶没有人发布这个不使用任何 JavaScript的“巧妙”版本，它只使用 CSS。

#radio1 {
    display: none;
}

#wrapper {
    /* NOTE: This wrapper div is not needed provided you can position the label for #radio1 on top of #radio2 using some other technique. */
    position: relative;
}

#radio1:not(:checked) ~ * label[for="radio1"] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#radio1:checked ~ * label[for="radio1"] {
    display: none;
}

/* Non-essential styles: */ 

label[for],
label:not([for="radio1"]) {
    cursor: pointer;
    border-radius: 7px;
}
label[for]:hover + label,
label:not([for="radio1"]):hover {
    background-color: #ccc;
}

<input type="radio" name="group1" id="radio1" checked="checked"  />

<p>Look mum, <strong>no JavaScript!</strong></p>

<div id="wrapper">
    <label for="radio1"></label>
    <label>
        <input type="radio" name="group1" id="radio2" />
        You can toggle me on and off!
    </label>
</div>

解释：

#radio1( <input type="radio" id="radio2" />) 总是隐藏的。
将 CSS:checked和:not(:checked)伪类选择器与同级选择器 ( +and ~) 一起使用允许其他元素的样式受到影响，具体取决于是否选中 <input type="checkbox" />或。<input type="radio" />
- 因此，何时#radio1未选中（或何时#radio2选中）会导致 a<label>覆盖在该标签的顶部#radio2并且该标签具有for="radio1"，因此单击它将导致#radio1被选中，而不是#radio2.
- 重要警告：CSS 的兄弟选择器规则仅允许选择器根据其祖先和其祖先更早的兄弟选择元素。因此，您不能根据其祖先的任何其他后代设置元素的样式。
  - 当支持 CSS4 的选择器功能时，此限制将被删除，:has()但截至 2020 年 11 月，只有 PrinceXML 支持:has()，由于实施困难，目前看起来:has()将完全从 CSS4 中删除。

这种方法可以扩展以支持多个单选按钮：

#uncheckAll {
    display: none;
}

#uncheckAll:checked ~ * label[for="uncheckAll"] {
    display: none;
}

label {
    cursor: pointer;
}

label:not([for]) {
    position: relative;
}

label[for="uncheckAll"] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

input[name="group1"]:not(:checked) + label[for="uncheckAll"] {
    display: none;
}

<input type="radio" name="group1" id="uncheckAll" checked="checked"  />

<label>
    <input type="radio" name="group1" id="radio2" />
    <label for="uncheckAll"></label>
    You can toggle me on and off!
</label>

<label>
    <input type="radio" name="group1" id="radio3" />
    <label for="uncheckAll"></label>
    And me!
</label>

<label>
    <input type="radio" name="group1" id="aragorn" />
    <label for="uncheckAll"></label>
    And my sword!
</label>

<label>
    <input type="radio" name="group1" id="gimli" />
    <label for="uncheckAll"></label>
    And my axe!
</label>

score 1 · Accepted Answer

扩展 user3716078 的答案以允许多个独立的单选按钮组以及将事件侦听器分配给多个元素的更简洁的方式......

window.onload = function() {

    var acc_checked=[];

    [].slice.call(document.querySelectorAll('.accordion input[type="radio"]')).forEach(function(el,i){
        /**
         * i represents the integer value of where we are in the loop
         * el represents the element in question in the current loop
         */
        el.addEventListener('click', function(e){

            if(acc_checked[this.name] != this) {
                acc_checked[this.name] = this;
            } else {
                this.checked = false;
                acc_checked[this.name] = null;
            }

        }, false);

    });

}

score 1 · Accepted Answer

我会尝试用 3 个单选按钮做一个小答案，你可以稍后添加东西。

const radios = Array.from(document.getElementsByClassName('radio'))

for(let i of radios) {
    i.state = false

    i.onclick = () => {
        i.checked = i.state = !i.state

        for(let j of radios)
            if(j !== i) j.checked = j.state = false
    }
}

<input class="radio" type="radio">X
<input class="radio" type="radio">Y
<input class="radio" type="radio">Z

这适用于单一形式。如果您有多个带有 class="radio" 的表单，那么一旦您单击一个单选按钮，其他的就会被禁用。如果这是您想要的，请使用它。

现在我想在我的 rails 项目上实现这个，它有多个表单（取决于，从数据库中获取），每个表单都有 2 个可见的单选按钮 + 1 个隐藏的单选按钮。

我希望用户选择/取消选择每个表单的单选按钮。并且在表单上选择一个不应取消选择另一个表单上的另一个选定按钮。所以我宁愿这样做：

var radios = Array.from(document.getElementsByClassName('radio'))

for (let i of radios) {
  i.state = false

  i.onclick = () => {
    i.checked = i.state = !i.state

    for (let j of radios)
      if (j !== i) j.state = false
  }
}

<form>
  <input class="radio" name="A" type="radio">A
  <input class="radio" name="A" type="radio">B
  <input class="radio" name="A" type="radio">C
</form>

<form>
  <input class="radio" name="A" type="radio">D
  <input class="radio" name="A" type="radio">E
  <input class="radio" name="A" type="radio">F
</form>

<form>
  <input class="radio" name="SOMETHING" type="radio">G
  <input class="radio" name="SOMETHING" type="radio">H
  <input class="radio" name="SOMETHING" type="radio">I
</form>

您会看到它们都具有相同的名称，但它们采用不同的形式，按 3 分组，因此这适用于多种形式。

score 1 · Accepted Answer

我知道已经很晚了（现在甚至没有必要），这里有很多解决方案，但是我找不到任何特定于所问问题的解决方案，或者对于这个简单的场景，其中有太多代码，在寻找时可以轻松忽略它答案。

所以在这里，我提出我的解决方案，因为它可能对任何新手都有帮助。这个想法很简单，只是

在我的情况下，它的“切换”在所需的切换上设置相同的类
获取鼠标悬停动作切换的当前值
反转切换值。

通过这种方式，您可以选择任何切换或完全忽略它们，但再次单击已选择的切换。您还可以使用给定的代码段对此进行测试。

var val;
$('.toggles').mouseup(function(){
  val = this.checked
}).click(function(){
  this.checked = val == true ? false : true
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <input class="toggles form-check-input" type="radio" value="true" name="enabled" id="enabled_true">
    <label class="form-check-label" for="enabled_true">Enabled</label>
    <input class="toggles form-check-input" type="radio" value="false" name="enabled" id="enabled_false">
    <label class="form-check-label" for="enabled_false">Disabled</label>
</div>

score 0 · Accepted Answer

大多数现代浏览器都checked="anything"认为checked="true".

如果这对您的情况有意义，您可能必须删除选中的属性，其中之一可能与您加载页面的时间有关。

$(this).removeAttr('checked')

如果您希望根据某些条件检查单选按钮，这可能会对您有所帮助。您可以简单地删除该属性来实现这一点。

PS：在所有情况下都没有帮助。

score 0 · Accepted Answer

这是普通 JS 的方式，它onchange和onclick事件相结合（onchange用于检查而onclick取消检查）。

document.querySelector("input").onchange = function() {
    this.onclick = function() {
        this.checked = false;
        this.onclick = null;
    }
};

score 0 · Accepted Answer

如果您正在寻找 jQuery 中的解决方案，这里就是。它类似于这个

    $('input:radio').click(function() { 
      let name = $(this).attr('name');
      let self = $(this);
      [].filter.call($(`input[name=${name}]`), function(ele){
        return self[0] !== $(ele)[0];
      }).forEach(function(otherEle){
        $(otherEle).removeAttr('data-check');
      });

      if($(this).attr('data-check')){
        $(this).prop("checked", false);
        $(this).removeAttr('data-check');
      }else{
        $(this).attr("data-check", "1");
      }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input class="radio" name="A" type="radio">A
  <input class="radio" name="A" type="radio">B
  <input class="radio" name="A" type="radio">C
</form>

<form>
  <input class="radio" name="B" type="radio">D
  <input class="radio" name="B" type="radio">E
  <input class="radio" name="B" type="radio">F
</form>

<form>
  <input class="radio" name="C" type="radio">G
  <input class="radio" name="C" type="radio">H
  <input class="radio" name="C" type="radio">I
</form>

score 0 · Accepted Answer

此 javascript 有助于取消选择文档中的每个收音机：

function toggleRadio(event)
{
    if(event.target.type === 'radio' && event.target.checked === true)
    {
        setTimeout(()=>{ event.target.checked = false; },0);
    }
}
document.addEventListener('mouseup', toggleRadio);

body { font-size: .55em; }
table { border-collapse: collapse; margin: 0 auto; }
td, th { border: 1px solid #333333; }
td:first-child { padding: 0 0.7em; }
#scale { font-weight:bold; text-align:center; }

<p id="scale">
  5 = Excellent | 4 = Satisfactory | 3 = About Average | 2 = Unsatisfactory | 1 = Very Poor
</p>
<table>
  <thead>
    <tr>
      <th>&nbsp;</th> <th>5</th> <th>4</th> <th>3</th> <th>2</th> <th>1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>How do rate the default behavior of radios inputs in HTML?</td>
      <td><input type="radio" name="r1" value="5" required></td>
      <td><input type="radio" name="r1" value="4"></td>
      <td><input type="radio" name="r1" value="3"></td>
      <td><input type="radio" name="r1" value="2"></td>
      <td><input type="radio" name="r1" value="1"></td>
    </tr>
    <tr>
      <td>How do rate this code's ability to deselect radios?</td>
      <td><input type="radio" name="r2" value="5" required></td>
      <td><input type="radio" name="r2" value="4"></td>
      <td><input type="radio" name="r2" value="3"></td>
      <td><input type="radio" name="r2" value="2"></td>
      <td><input type="radio" name="r2" value="1"></td>
    </tr>
  </tbody>
</table>

这种方法的优点：

取消选择是通过单击当前选择的单选来实现的。
代码不需要任何 DOM 搜索来获取单选元素。
页面加载后以编程方式添加到文档的单选输入也将是可取消选择的。
只创建一个事件侦听器来服务所有无线电（而不是每个无线电一个）。
代码可以在页面加载之前或之后运行，它仍然可以正常工作。

此处讨论了此代码的用户体验注意事项。

score 0 · Accepted Answer

我遇到了这个问题，我的解决方案相当简单，我只是将它们变成了复选框，当一个复选框被切换时，我取消选择了组中的所有其他复选框。

我知道它有点 hacky，并且具有很大的 O 复杂度（虽然 n 很小），但它确实有效！（待办事项：为变量考虑更多原始名称）

$(document).ready(function() {
  $("input[name=days]").each((_, el) => {
    el.addEventListener("click", function () {
      $("input[name=days]").each((_, myEl) => {
        if (el != myEl) {
          myEl.checked = false;
        }
      });
      // Do other stuff
    });
  });
});

.radio-selector {
  display: inline-flex;
  flex-wrap: wrap;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  border: 0;
}
.radio-selector input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
}
.radio-selector label {
  margin: 0 1rem 1rem 0;
  padding: 0.75rem 1rem;
  min-width: 10rem;
  font-size: 1.6rem;
  border-radius: 2rem;
  text-align: center;
  color: #333;
  border: 1px solid #333;
  transition: all 0.3s ease-in-out;
}
.radio-selector label:hover {
  background-color: lightpink;
  cursor: pointer;
}
.radio-selector input:checked + label {
  color: white;
  background-color: purple;
  border: 1px solid transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<fieldset class="radio-selector">
  <input type="checkbox" id="day-1" name="days" value="1" />
  <label for=day-1 class="radio-btn">+- 1 day</label>
  <input type="checkbox" id="day-3" name="days" value="3" />
  <label for=day-3 class="radio-btn">+- 3 days</label>
  <input type="checkbox" id="day-7" name="days" value="7" />
  <label for=day-7 class="radio-btn">+- 7 days</label>
</fieldset>

score 0 · Accepted Answer

对不起，如果我的答案已经得到回答，但老实说，我很快就读完了，因为有很多

我不是很熟练，但我想我找到了一种非常简单的方法来取消选中已选中的单选按钮，只需再次单击它......只需使用全局变量、一个小函数和 onclick 事件

<script>
  var lastChecked = null;

  function unckeck(myRadio)
  {
    if ( lastChecked == myRadio )
    {
      lastChecked = null;
      myRadio.checked = false;
    }
    else
      lastChecked = myRadio;
  }
</script>

<form>
  <input type='radio' name='someCommonName' value='foo' onclick='uncheck(this)'/> foo <br/>
  <input type='radio' name='someCommonName' value='bar' onclick='uncheck(this)'/> bar <br/>
  <input type='radio' name='someCommonName' value='baz' onclick='uncheck(this)'/> baz <br/>
</form>

score -1 · Accepted Answer

您可以使用checked单选按钮的属性来取消选中它。

像这样的东西：

<script>
 function uncheck()
 {
  document.getElementById('myRadio').checked = false;        
 }
 function check()
 {
  document.getElementById('myRadio').checked = true;        
 }
</script>
<input id="myRadio" type="radio" checked="checked"/>
<button onclick="uncheck();">Uncheck</button>
<button onclick="check();">Check</button>

在这里查看实际操作：http: //jsfiddle.net/wgYNa/

score -1 · Accepted Answer

完整的代码看起来像这样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<input name="radio" type="radio" id="myRadio" value="myRadio" checked="checked"     onclick="setRadio(this)" />
<label for="myRadio"></label>


<script language="javascript">
function setRadio(obj) 
{
    obj.checked = false;
}
</script>
</body>
</html>

score -1 · Accepted Answer

这是一个可以说是取消选中单选按钮而不是进行新选择的示例。我有一本字典，可以使用各种索引来选择其条目。通过一组单选按钮选择要使用的索引。但是，如果用户只想浏览，也可以使用“随机输入”按钮。当通过随机输入按钮选择条目时保留索引会产生误导，因此当按下此按钮时，我取消选中所有索引选择单选按钮并将索引框架的内容替换为空白页面.

score -1 · Accepted Answer

如果您使用 Iclick 插件，它就像您在下面看到的一样简单。

 $('#radio1').iCheck('uncheck');

score -1 · Accepted Answer

不幸的是，它在 Chrome 或 Edge 中不起作用，但它在 FireFox 中起作用：

$(document)
// uncheck it when clicked
.on("click","input[type='radio']", function(){ $(this).prop("checked",false); })
// re-check it if value is changed to this input
.on("change","input[type='radio']", function(){ $(this).prop("checked",true); });

score -1 · Accepted Answer

对 Shmili Breuer 答案的无错误更新。

(function() {
    $( "input[type='radio'].revertible" ).click(function() {
        var $this = $( this );

        // update and remove the previous checked class
        var $prevChecked = $('input[name=' + $this.attr('name') + ']:not(:checked).checked');
            $prevChecked.removeClass('checked');

        if( $this.hasClass("checked") ) {
            $this.removeClass("checked");
            $this.prop("checked", false);
        }
        else {
            $this.addClass("checked");
        }
    });
})();

score -1 · Accepted Answer

这几乎对我有用。

<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>

$(document).on("click", "input[name='radioBtn']", function(){
    thisRadio = $(this);
    if (thisRadio.hasClass("imChecked")) {
        thisRadio.removeClass("imChecked");
        thisRadio.prop('checked', false);
    } else { 
        thisRadio.prop('checked', true);
        thisRadio.addClass("imChecked");
    };
})

但是如果我检查一个单选按钮，然后检查另一个并尝试再次检查第一个，我必须单击两次。这是因为它具有 imChecked 类。我只需要在验证之前取消选中其他单选按钮。

添加此行使其工作：

$("input[name='radioBtn']").not(thisRadio).removeClass("imChecked");

<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>

$(document).on("click", "input[name='radioBtn']", function(){
    thisRadio = $(this);
    $("input[name='radioBtn']").not(thisRadio).removeClass("imChecked");
    if (thisRadio.hasClass("imChecked")) {
        thisRadio.removeClass("imChecked");
        thisRadio.prop('checked', false);
    } else { 
        thisRadio.prop('checked', true);
        thisRadio.addClass("imChecked");
    };
})

score -1 · Accepted Answer

下面的代码可以解决问题。

$('input[type=radio]').click(function() {
        if($(this).hasClass("checked")){
            this.checked = false;
            $(this).removeClass("checked")
        }else{
            $(this).addClass("checked")
        }
    });

score -1 · Accepted Answer

假设您有一个按钮，在单击它时，您可以将所有单选按钮选择设置为 false。您可以在 onclick 处理程序中编写以下代码。
下面的代码采用基于类名的单选按钮，并且对于每个元素，它会将其标记为 false。

var elements=document.getElementsByClassName('Button');

Array.prototype.forEach.call(elements, function(element) {
  element.checked = false;
});

javascript - 如何通过单击取消选中单选按钮？

31 回答 31

例子

按住Ctrl(⌘</kbd> on mac) key to uncheck.