[英]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: 假设我有一个表格,人们可以选择他们想要的宠物,并可以选择指明这样的品种和年龄:
<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.)
(并且他们已经将70个问题填写到表格中,因此重新设置整个过程很麻烦。)
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? 如果用户改变主意并切换到另一只宠物,我该如何添加JavaScript来取消选择一只宠物的品种和年龄?
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.
单击“ cat”应删除杂种或笼子中可能存在的任何值,单击“ dog”应删除杂种或笼子中可能存在的任何值。
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". 由于您所有的问题似乎都有其独特的价值,因此最简单的方法是使所有的猫和狗都具有相同的名称,例如“ animalbreed”,并与“ animalage”做类似的事情。
This might require some rearranging on the backend, but it would solve your frontend problem in the easiest way. 这可能需要在后端进行一些重新排列,但这将以最简单的方式解决您的前端问题。
This is totally brute force. 这完全是蛮力。 Gets all inputs, and in a loop if named catbreed, dogbreed, catage, or dogage, deslects them.
获取所有输入,并在循环中(如果命名为catbreed,dogbreed,catage或dogage)将其分离。 It could be refined by only looping over the inputs with type
radio
. 可以通过仅循环使用
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 在jsfiddle上看到它的实际效果
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.