0
252
Views¿Se puede usar un botón de opción en un formulario para seleccionar otro botón de opción en el mismo formulario?
Tengo un formulario HTML que tiene 2 grupos de botones de opción. Necesito que el primer grupo también cambie la selección en el segundo grupo, es decir
El grupo 1 tiene las opciones A y B, el grupo 2 tiene las opciones C y D; cuando selecciono A, necesito que el formulario también seleccione C; cuando selecciono B, necesito que el formulario también seleccione D. Necesito A y C seleccionados de forma predeterminada cuando se carga la página. A y C siempre estarán emparejados; B & D siempre estarán emparejados.
Sé que esto suena poco práctico, pero la razón es que este formulario envía sus respuestas al formulario de otro proveedor donde no puedo editar los campos. Efectivamente, tienen una pregunta duplicada en su formulario (la misma pregunta solo con una redacción ligeramente diferente), y no quiero que mis usuarios tengan que responder la misma pregunta dos veces, por lo que espero ocultar los botones para C y D de la vista. .
El "nombre" en cada grupo es diferente, y el "valor" y la "identificación" de cada botón de opción son únicos.
Se puede hacer esto? Las soluciones JQuery y JS son bienvenidas.
<label for="buyer-select"> <div class="user-select-label">Buyer</div> </label> <input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked> <label for="agent-select"> <div class="user-select-label">Agent</div> </label> <input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker"> <label class="label-text" for="buyer">Buyer</label> <input type="radio" name="agent" id="buyer" value="false"> <label class="label-text" for="agent">Agent</label> <input type="radio" name="agent" id="agent" value="true">2 answers
Answer question0
Simplemente establezca la propiedad checked del botón correspondiente.
document.getElementById("buyer").checked = true; document.getElementById("buyer-select").addEventListener("click", function() { document.getElementById("buyer").checked = true; }); document.getElementById("agent-select").addEventListener("click", function() { document.getElementById("agent").checked = true; }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="buyer-select"> <div class="user-select-label">Buyer</div> </label> <input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked> <label for="agent-select"> <div class="user-select-label">Agent</div> </label> <input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker"> <br> <label class="label-text" for="buyer">Buyer</label> <input type="radio" name="agent" id="buyer" value="false"> <label class="label-text" for="agent">Agent</label> <input type="radio" name="agent" id="agent" value="true">También puede reemplazar el segundo conjunto de botones de radio con una sola entrada oculta. Coloque los valores que habría enviado el botón de radio en el valor de la entrada oculta.
document.getElementById("buyer-select").addEventListener("click", function() { document.getElementById("buyer-agent").value = "false"; }); document.getElementById("agent-select").addEventListener("click", function() { document.getElementById("buyer-agent").value = "true"; }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="buyer-select"> <div class="user-select-label">Buyer</div> </label> <input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked> <label for="agent-select"> <div class="user-select-label">Agent</div> </label> <input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker"> <input type="hidden" name="agent" id="buyer-agent" value="false">0
Es esto lo que querías:
Si es así, prueba este código:
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { $('input[type=radio][name="pet"]').change(function() { var $radiobutton = $("input[value='"+$(this).val()+"']"); $radiobutton.prop("checked", true); }); $('input[type=radio][name="pet2"]').change(function() { var $radiobutton = $("input[value='"+$(this).val()+"']"); $radiobutton.prop("checked", true); }); }, false); </script> </head> <h2>Select a Pet</h2> <div> <input name="pet" type="radio" value="dog" /><span>Dog</span> <input name="pet" type="radio" value="cat" /><span>Cat</span> <input name="pet" type="radio" value="fish" /><span>Fish</span> </div> <div> <input name="pet2" type="radio" value="dog" /><span>Dog</span> <input name="pet2" type="radio" value="cat" /><span>Cat</span> <input name="pet2" type="radio" value="fish" /><span>Fish</span> </div>