CODEWITHSUNDEEP
javascriptjquery
Michael
Michael

Reputation: 13616

How to remove selection from radio button?

I need to remove selection from radio checkbox using JQuery.

Here is HTML and radio buttons: 

 <div data-role="popup" id="popupShapes" data-theme="none" style="z-index:999" data-dismissible="true" data-close-btn="right">
        <a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <div data-role="collapsibleset" data-theme="b" data-content-theme="a" style="margin:0; width:250px;">
            <div data-role="listview" data-inset="false">
                <ul data-role="listview">
                    <li>
                        <input type="radio" name="type" value="point" id="pointToggle" />
                        <label for="pointToggle">Point</label>
                    </li>
                    <li>
                        <input type="radio" name="type" value="line" id="lineToggle" />
                        <label for="lineToggle">Line</label>
                    </li>
                    <li>
                        <input type="radio" name="type" value="polygon" id="polygonToggle" />
                        <label for="polygonToggle">Polygon</label>
                    </li>
                </ul>
            </div><!-- /collapsible -->
        </div><!-- /collapsible set -->
    </div><!-- /popup -->

At some point I need to remove selected input radio button.

Here how I do it:

  $('#popupShapes ul input').prop('checked', false);

But the row above doesn't work. The radio button stay selected.

How to remove selection from radio button?

Upvotes: 1

Views: 2735

Answers (1)

shubham agrawal
shubham agrawal

Reputation: 3541

This simple script allows you to uncheck an already checked radio button. Works on all javascript enabled browsers.

<html>
    <!-- html from your link: [http://jsfiddle.net/wuAWn/][1]  -->
    <body>
        <input type='radio' class='radio-button' name='re'>
        <input type='radio' class='radio-button' name='re'>
        <input type='radio' class='radio-button' name='re'>
    </body>

    <script type="text/javascript">
        var allRadios = document.getElementsByName('re');
        var booRadio;
        var x = 0;
        for(x = 0; x < allRadios.length; x++){

            allRadios[x].onclick = function() {
                if(booRadio == this){
                    this.checked = false;
                    booRadio = null;
                }else{
                    booRadio = this;
                }
            };
        }
    </script>
</html>

JSFIDDLE

Upvotes: 2

Related Questions