How Do I Deselect A Whole Group Of Radio Buttons When A User Clicks On Some Other Button?

Let's say I have a form where people can choose what kind of pet they want and - optionally - indicate a breed and age like this:

Solution 1:

Since all your questions seem to have unique values, the easiest way would be to make all the cat and dog breeds the same name, like "animalbreed", and do something similar with "animalage".

This might require some rearranging on the backend, but it would solve your frontend problem in the easiest way.

Solution 2:

This is totally brute force. Gets all inputs, and in a loop if named catbreed, dogbreed, catage, or dogage, deslects them. It could be refined by only looping over the inputs with type radio.

function clearRadioButtons() {
    var inputs = document.getElementsByTagName("input");
    var numInputs = inputs.length;
    for (i = 0; i < numInputs; i++) {
        if (inputs[i].name == "catbreed" || inputs[i].name == "dogbreed" || inputs[i].name == "catage" || inputs[i].name == "dogage") {
           inputs[i].selected = false;
        }
    }
}

<button id='whatever' onclick='clearRadioButtons()'>Clickme</button>

See it in action on jsfiddle

Share