how to uncheck a radio button

Question

I want to uncheck a radiobutton i found a way for doing this but while the radio buttons are inside a form the code won't work this is my script for unchecking a checked radio button

<script type="text/javascript">
       var allRadios = document.getElementsByName(1);
        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>

    <form name="theForm" target="_blank" action="laravel.php">
    <label for="test">test</label>
    <input type="radio" id="1" class="radio" name="1" value="1">
    <input type="radio" id="2" class="radio" name="1" value="2">
    <input type="radio" id="3" class="radio" name="1" value="3">
    <input type="radio" id="4" class="radio" name="1" value="4">
    </form>

the script works fine when the radio buttons are outside the form tag but it is not working when radio inputs are in the form i am wondering what am i missing here

Answer 1

The problem is the order. You load your javascript before the html is finished.

To solve this, simply place the javascript near the end of the file, just before the closing </body> tag.

If you use jquery, you can also wrap it with $(document).ready(function() { ... } .