如何取消选中单选按钮？

Question

我的代码如下所示：

<div class="col-md-4">
    <ul class="list-unstyled">
        <li><strong>England</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="england"> Chelsea
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="england"> Mu
                </label>
            </div>
        </li>
        ...
    </ul>
</div>
<div class="col-md-4">
    <ul class="list-unstyled">
        <li><strong>Spain</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="spain"> Madrid
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="spain"> Barcelona
                </label>
            </div>
        </li>
        ...
    </ul>
</div>

演示：https : //jsfiddle.net/oscar11/m7by6zcw/6/

我希望取消选中单选按钮。因此，如果选中单选按钮，则可以再次取消选中它。

我该怎么做？

Answer 1

其他答案是正确的，您将输入的检查属性设置为 false。

inputElement.checked = false;

但我想我明白您要做什么（取消选中已选中的选项），并且根据我的经验，这比这要棘手一些。问题与检查属性有关，当您查看它以响应事件时，它总是解析为 true，因为更改发生在您的事件处理程序触发之前。为了解决这个问题，我总是在元素上设置一个自定义属性来跟踪在当前事件循环之前检查的内容。

inputElement.checked = false;

var radios = document.querySelectorAll('input[type="radio"]');
for(var i = 0; i < radios.length; i++){
radios[i].addEventListener('click', uncheckIfChecked);
}

function uncheckIfChecked(event){
if(event.currentTarget.alreadyChecked) event.currentTarget.checked = false;
updateChecked();
}

function updateChecked(){
	for(var x = 0; x < radios.length; x++){
  	if(radios[x].checked == true){
    	radios[x].alreadyChecked = true;
    }else{
    	radios[x].alreadyChecked = false;
    }
  }
}

不确定这是否正是您要寻找的，但希望对您有所帮助！