Reset radio selection from click [ #javascript, #html]

Your attempts to reset the form to its initial state are actually working but the problem is that, because you are submitting the form every time you click on an input, the page and, therefore, the form are being reloaded and the last clicked input now has an initial state of checked. So, what you need to do is to loop through all the checked inputs and "uncheck" them. Here's a trimed down example of one way of doing so:

var inputs=document.querySelectorAll("input[type=radio]:checked"),
    x=inputs.length;
document.querySelector("button[type=reset]").addEventListener("click",function(event){
    while(x--)inputs[x].checked=0;
    event.preventDefault();
},0);

<form>
    <input id="option1a" name="option1" type="radio" value="a"><label for="option1a">Option 1A</label>
    <input checked id="option1b" name="option1" type="radio" value="b"><label for="option1b">Option 1B</label>
    <input id="option1c" name="option1" type="radio" value="c"><label for="option1c">Option 1C</label>
    <hr>
    <input id="option2a" name="option2" type="radio" value="a"><label for="option2a">Option 2A</label>
    <input checked id="option2b" name="option2" type="radio" value="b"><label for="option2b">Option 2B</label>
    <input id="option2c" name="option2" type="radio" value="c"><label for="option2c">Option 2C</label>
    <hr>
    <button type="reset">Clear</button>
</form>