当用户单击其他按钮时，如何取消选择整个单选按钮组？

Question

假设我有一个表格，人们可以选择他们想要的宠物，并可以选择指明这样的品种和年龄：

    <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

如果他们先选择“猫”，然后切换到“狗”，则单选按钮将解决此问题。 但是，如果他们已经为猫选择了品种或年龄，则无法取消选择。 （并且他们已经将70个问题填写到表格中，因此重新设置整个过程很麻烦。）

如果用户改变主意并切换到另一只宠物，我该如何添加JavaScript来取消选择一只宠物的品种和年龄？

更新：我的问题可能还不够清楚。 我不想添加一个按钮来重置品种和年龄值，我只是希望它是自动的并且防白痴。 单击“ cat”应删除杂种或笼子中可能存在的任何值，单击“ dog”应删除杂种或笼子中可能存在的任何值。

Answer 1

由于您所有的问题似乎都有其独特的价值，因此最简单的方法是使所有的猫和狗都具有相同的名称，例如“ animalbreed”，并与“ animalage”做类似的事情。

这可能需要在后端进行一些重新排列，但这将以最简单的方式解决您的前端问题。

Answer 2

这完全是蛮力。 获取所有输入，并在循环中（如果命名为catbreed，dogbreed，catage或dogage）将其分离。 可以通过仅循环使用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>

在jsfiddle上看到它的实际效果