Trending News Trending News -4 years ago 132
HTML Question

How can I uncheck radio button?

My code looks like this :

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


Demo : https://jsfiddle.net/oscar11/m7by6zcw/6/

I want the radio button to be unchecked. So if the radio button is checked, it can be unchecked again.

How can I do it?

Answer Source

Maybe this can help you:

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

And adding an attribute 'data-waschecked' to your radio buttons

<input type="radio" name="spain" data-waschecked="false" />
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download