如何取消選中單選按鈕？

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

其他答案正確，您將輸入的checked屬性設置為false。

inputElement.checked = false;

但我想我了解您要執行的操作（取消選中選中的選項），這比我的經驗要棘手得多。 問題與您對事件進行響應時將其屬性始終解析為true有關，因為更改是在事件處理程序觸發之前發生的。 為了解決這個問題，我一直在元素上設置一個自定義屬性，以跟蹤在當前事件循環之前檢查過的內容。

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

 <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> <li> <div class="checkbox"> <label> <input type="radio" name="england"> Arsenal </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> <li> <div class="checkbox"> <label> <input type="radio" name="spain"> Atletico </label> </div> </li> </ul> </div> 

不確定是否正是您要找的東西，但希望能對您有所幫助！

Answer 2

也許這可以幫助您：

https://stackoverflow.com/a/15105717/3710195

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

        // if this was previously checked
        if ($radio.data('waschecked') == true)
        {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
        }
        else
            $radio.data('waschecked', true);

        // remove was checked from other radios
        $radio.siblings('input[type="radio"]').data('waschecked', false);
    });
});

並在單選按鈕中添加“數據已檢查”屬性

<input type="radio" name="spain" data-waschecked="false" />

Answer 3

執行將單選按鈕的checked屬性設置為false的功能。

Answer 4

將其包裝成form並添加一個重置按鈕，然后它返回其原始狀態。

<form>
...
<input type="reset">
</form>

https://jsfiddle.net/m7by6zcw/7/