带有输入其他选项的单选按钮

Question

我这里有一个 html 代码，它有一个单选按钮和一个输入选项。 如何在选择单选按钮时以及在选择输入字段时清除输入字段，选择的单选按钮将不再被选中。

 function loadChoice() { a = document.getElementById('load_choice'); a.checked = true; } function regularload() { a = document.getElementById('load_choice'); a.value = ""; }

 <div class="form-group"> <span>3. # ng Bahay kung saan po kayo susunduin</span><br> <input type="radio" id="none" onclick="regularload()" name="3. # ng Bahay kung saan po kayo susunduin" value="None">   <label for="none">None</label><br> <label for="other" onclick="loadChoice()">Others</label> <input type="text" id="load_choice" name="3. # ng Bahay kung saan po kayo susunduin"> </div>

Answer 1

像这样

我改为复选框，因为这更有意义

我还给了包装器一个 ID

 document.getElementById("bahay").addEventListener("click", function(e) { const tgt = e.target; const textField = document.getElementById("other"); const check = document.getElementById("none"); if (tgt.id === "none") textField.value = ""; // or if (tgt.type && tgt.type === "radio") else if (tgt.id === "other") check.checked = false; })

 <div class="form-group" id="bahay"> <span>3. # ng Bahay kung saan po kayo susunduin</span><br> <label><input type="checkbox" id="none" name="3. # ng Bahay kung saan po kayo susunduin" value="None">None</label><br> <label>Others <input type="text" id="other" name="3. # ng Bahay kung saan po kayo susunduin"></label> </div>

使用收音机

 document.getElementById("bahay").addEventListener("click", function(e) { const tgt = e.target; const textField = document.getElementById("other"); const check = document.getElementById("none"); if (tgt.id === "none") textField.value = ""; else if (tgt.id === "other") check.checked = false; })

 <div class="form-group" id="bahay"> <span>3. # ng Bahay kung saan po kayo susunduin</span><br> <label><input type="radio" id="none" name="3. # ng Bahay kung saan po kayo susunduin" value="None">None</label><br> <label>Others <input type="text" id="other" name="3. # ng Bahay kung saan po kayo susunduin"></label> </div>

Answer 2

这是另一个可以处理任意数量的问题和选项的解决方案（无论是否有另一个可用的自由文本选项，它都可以使用）：

 const div=document.querySelector(".form-group"); // get parent of all inputs ... div.addEventListener("change",ev=>{ const el=ev.target; if(el.type==="radio") div.querySelectorAll("[type=text][name="+el.name+"]").forEach(o=>o.value=""); }); div.addEventListener("input",ev=>{ const el=ev.target; if(el.type==="text") div.querySelectorAll("[type=radio]:checked[name="+el.name+"]").forEach(o=>o.checked=false); });

 <div class="form-group"><span>3. # ng Bahay kung saan po kayo susunduin</span><br> <label><input type="radio" name="n3bahay" value="1">one</label><br> <label><input type="radio" name="n3bahay" value="2">two</label><br> <label><input type="radio" name="n3bahay" value="3">three</label><br> <label><input type="radio" name="n3bahay" value="4">four</label><br> <input type="text" name="n3bahay" placeholder="other ..."> <hr><span>4. # and another question ...</span><br> <label><input type="radio" name="n4more" value="1">one</label><br> <label><input type="radio" name="n4more" value="2">two</label><br> <label><input type="radio" name="n4more" value="3">three</label><br> <label><input type="radio" name="n4more" value="4">four</label><br> <input type="text" name="n4more" placeholder="other ..."> <hr><span>5. # a yes/no question:</span><br> <label><input type="radio" name="n5xtra" value="1">yes</label><br> <label><input type="radio" name="n5xtra" value="0">no</label> </div>

它适用于“委托事件附件”，因此，即使要添加更多问题，它们也会得到正确处理。