使用jQuery使表格单元格可点击

Question

我在一个网页上有一个小测验，上面有一个问题表。每一行都有两个可能的答案，每个答案都有自己的单选按钮供选择。现在我的问题，我想使整个单元格可点击，而不仅仅是单选按钮。

这是我想到的代码，但它只工作一次每个单选按钮。在第一次点击之后，我必须点击多次来切换选择。

jQuery(".clickable").click(function(event) {
var x = jQuery("input", this).attr("checked");
jQuery("input", this).attr("checked", !x);
return false;
});

下面是一个示例行

<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>

我将非常感谢你的建议!

Answer 1

您需要为所有两个类使用.each，如:

$( ".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>

---

纯js解决方案:

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>

Answer 2

您不需要使用jQuery或任何类型的JavaScript来"使整个单元格可点击"。你所要做的就是使用CSS让<label>元素填充整个单元格。下面是一种方法，在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>

Answer 3

您需要使用event.currentTarget来确保无论用户在行内单击，您始终针对可单击的父行。然后使用.find()获取点击行内的输入字段。

jQuery(".clickable").on( 'click', function(event) {
let clickable = jQuery(event.currentTarget);
let radioInput = clickable.find('.radio_input1');
radioInput.prop("checked", true );
});