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

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”应该清除可能存在的 dogbreed 或 dogage 的任何值，单击“dog”应该清除任何可能存在的 catbreed 或 catage 的值。

Answer 1

由于您所有的问题似乎都有独特的值(value)，最简单的方法是让所有的猫狗品种都具有相同的名称，例如“animalbreed”，并使用“animalage”做类似的事情。

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