How do I deselect a whole group of radio buttons when a user clicks on some other button?

Question

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:

    <input type="radio" name="pet" value="P70" /> Cat<br> 
        Breed:<br> 
        <input type="radio" name="catbreed" value="P71" /> Persian  
        <input type="radio" name="catbreed" value="P72" /> Siamese
        <input type="radio" name="catbreed" value="P73" /> Tabby  <br> 
        Age:<br> 
        <input type="radio" name="catage" value="P74" /> Kitten
        <input type="radio" name="catage" value="P75" /> Adult
        <p>

    <input type="radio" name="pet" value="P78" /> Dog<br>
        Breed:<br>
        <input type="radio" name="dogbreed" value="P79" /> German Shepherd
        <input type="radio" name="dogbreed" value="P80" /> Golden Retriever
        <input type="radio" name="dogbreed" value="P81" /> Poodle  <br> 
        Age:<br> 
        <input type="radio" name="dogage" value="P82" /> Puppy
        <input type="radio" name="dogage" value="P83" /> Adult

If they first choose "cat" and then switch to "dog," the radio buttons will take care of that. But if they've already selected a breed or age for the cat, there's no way to deselect that. (And they're already 70 questions into the form, so resetting the whole thing is a hassle.)

How can I add a javascript that will deselect the breed and age for one pet if users change their minds and switch to a different pet?

UPDATE: I probably wasn't clear enough in my question. I'm not looking to add a button to reset the breed and age values, I just want it to be automatic and idiot-proof. Clicking "cat" should erase any values that might be there for dogbreed or dogage, and clicking "dog" should erase any values that are there for catbreed or catage.

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

Answer 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