Tengo un pequeño cuestionario en una página web con una tabla de preguntas. En cada fila hay dos respuestas posibles, cada una tiene su propio botón de opción para seleccionar. Ahora mi problema, quiero hacer que se pueda hacer clic en toda la celda y no solo en el botón de opción.
Este es el código que se me ocurrió, pero solo funciona una vez por botón de opción. Después del primer clic, tengo que hacer clic varias veces para cambiar la selección.
jQuery(".clickable").click(function(event) { var x = jQuery("input", this).attr("checked"); jQuery("input", this).attr("checked", !x); return false; });Aquí hay una fila de muestra
<tr class="row_cls" id="quiz_row0"> <td class="clickable" style="border:1px solid #ddd;vertical-align: middle;padding-top:10px;padding-bottom:10px;padding-left:10px;"> <label style="margin-bottom:0px;"> <input type="radio" style="height:20px; width:20px;" class="radio-form-control radio_input1" id="radio_input166" name="quiz_row0" value="Herausforderung" checked="checked"> <span style="font-size: 20px;">Herausforderung</span> </label></td> <td class="clickable" style="border:1px solid #ddd;vertical-align: middle;padding-top:10px;padding-bottom:10px;padding-left:10px;"> <label style="margin-bottom:0px;"> <input type="radio" style="height:20px; width:20px;" class="radio-form-control radio_input1" id="radio_input118" name="quiz_row0" value="Macht/ Aufstieg" checked="checked"> <span style="font-size: 20px;">Macht/ Aufstieg</span> </label></td> </tr>Estaría muy agradecido por las sugerencias!
Necesitas usar .each para las dos clases como:
$( ".clickable" ).each(function( index ) { $(this).click(function(event) { var x = jQuery("input", this).attr("checked"); jQuery("input", this).attr("checked", !x); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr class="row_cls" id="quiz_row0"> <td class="clickable" style="border:1px solid #ddd;vertical-align: middle;padding-top:10px;padding-bottom:10px;padding-left:10px;"> <label style="margin-bottom:0px;"> <input type="radio" style="height:20px; width:20px;" class="radio-form-control radio_input1" id="radio_input166" name="quiz_row0" value="Herausforderung" checked="checked"> <span style="font-size: 20px;">Herausforderung</span> </label></td> <td class="clickable" style="border:1px solid #ddd;vertical-align: middle;padding-top:10px;padding-bottom:10px;padding-left:10px;"> <label style="margin-bottom:0px;"> <input type="radio" style="height:20px; width:20px;" class="radio-form-control radio_input1" id="radio_input118" name="quiz_row0" value="Macht/ Aufstieg" checked="checked"> <span style="font-size: 20px;">Macht/ Aufstieg</span> </label></td> </tr> </table>Solución js pura:
document.querySelectorAll('.clickable').forEach(el => { el.addEventListener('click', () => { el.querySelector('input').checked = true; }); }); <table> <tr class="row_cls" id="quiz_row0"> <td class="clickable" style="border:1px solid #ddd;vertical-align: middle;padding-top:10px;padding-bottom:10px;padding-left:10px;"> <label style="margin-bottom:0px;"> <input type="radio" style="height:20px; width:20px;" class="radio-form-control radio_input1" id="radio_input166" name="quiz_row0" value="Herausforderung" checked="checked"> <span style="font-size: 20px;">Herausforderung</span> </label></td> <td class="clickable" style="border:1px solid #ddd;vertical-align: middle;padding-top:10px;padding-bottom:10px;padding-left:10px;"> <label style="margin-bottom:0px;"> <input type="radio" style="height:20px; width:20px;" class="radio-form-control radio_input1" id="radio_input118" name="quiz_row0" value="Macht/ Aufstieg" checked="checked"> <span style="font-size: 20px;">Macht/ Aufstieg</span> </label></td> </tr> </table>No necesita usar jQuery, o JavaScript de ningún tipo, para "hacer que se pueda hacer clic en toda la celda", todo lo que tiene que hacer es usar CSS para que el elemento <label> llene toda la celda. A continuación se muestra un enfoque, con comentarios explicativos en el CSS:
/* copied the CSS from the relevant elements' "style" attribute into the CSS below: */ td.clickable { border: 1px solid #ddd; vertical-align: middle; /* removed the padding from the <td> and applied it to the <label> child element in order that the <label> could extend to the edges of its parent <td> (this element) */ } label { /* by default causes the <label> to take the full width of its parent: */ display: block; /* removes any margin that might move the <label> from the edges of its parents borders: */ margin: 0; /* padding applied to the <label> instead of the parent <td>, in order to preserve spacing and aesthetics, but keeping the <label> positioned against all edges of the parent: */ padding-block: 10px; padding-inline: 10px; } td.clickable input { height: 20px; width: 20px; } td.clickable span { font-size: 20px; } <table> <tbody> <tr class="row_cls" id="quiz_row0"> <!-- I moved the inline CSS from the "style" attributes into the CSS pane, on the right; this makes it easier to modify the design and makes the HTML easier to read and understand: --> <td class="clickable"> <label> <!-- I've modified your <input> elements; in your original code they both had the "checked" attribute, but as they share the same "name" only one could ever be active, or "checked." With that in mind I removed the attribute from the second of <input> elements, so the first <input> is checked by default: --> <input type="radio" class="radio-form-control radio_input1" id="radio_input166" name="quiz_row0" value="Herausforderung" checked="checked"> <span>Herausforderung</span> </label></td> <td class="clickable"> <label> <input type="radio" class="radio-form-control radio_input1" id="radio_input118" name="quiz_row0" value="Macht/ Aufstieg"> <span>Macht/ Aufstieg</span> </label></td> </tr> </tbody> </table>Debe utilizar event.currentTarget para asegurarse de orientar siempre la fila principal en la que se puede hacer clic, sin importar si el usuario hace clic dentro de la fila. luego use .find() para obtener el campo de entrada dentro de la fila en la que se hizo clic.
jQuery(".clickable").on( 'click', function(event) { let clickable = jQuery(event.currentTarget); let radioInput = clickable.find('.radio_input1'); radioInput.prop("checked", true ); });