[英]Radio button to check all boxes
<table class="table borderless">
<thead>
<tr>
<th>Rank</th>
<th>+/-</th>
<th>Searches</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="optradio" class="custom"> ALL</td>
<td><input type="radio" name="optradio" class="custom"> ALL</td>
<td><input type="radio" name="optradio" class="custom"> ALL</td>
<td><input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="1" data-slider-value="[0,1000]" data-slider-id="RC" id="R"/></td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Rank 1-10</td>
<td><input type="checkbox" > Up</td>
<td><input type="checkbox" > Over</td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Rank 11-20</td>
<td><input type="checkbox" > Down</td>
<td><input type="checkbox" > Under</td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Rank 21-100</td>
<td><input type="checkbox" > No movement</td>
</tr>
<tr>
<td><input type="checkbox" class="custom-selector"> Not in top 100</td>
</tr>
</tbody>
</table>
Script: 脚本:
$(document).ready(function () {
$(".custom").change(function () {
$(".custom").parent().find(".custom-selector").prop("checked", true);
})
});
What I need is a radio button that checks all the boxes when selected. 我需要的是一个单选按钮,选中该复选框时会选中所有复选框。
Right now nothing happens when I click the radio button. 现在,当我单击单选按钮时,什么也没有发生。 However, if I add this radio button: 但是,如果我添加此单选按钮:
<input type="radio" id="op5" value="1" name="options2" class="custom">
Then they both work. 然后他们都工作。 Even the initial one checks all the boxes. 即使是最初的一个,也会选中所有框。
What is this strange behavior? 这是什么奇怪的行为? I'm missing something 我想念一些东西
EDIT: it appears the radio button must be outside the table? 编辑:看来单选按钮必须在桌子外面? Can I have it inside somehow? 我可以把它放在里面吗?
try: 尝试:
$(".custom").closest("tbody").find(".custom-selector").prop("checked", true);
or Just: 要不就:
$(".custom-selector").prop("checked", true);
Try this: 尝试这个:
$(".custom").change(function () {
$(this).parents('tbody').find(".custom-selector:checked");
});
and some reference: https://api.jquery.com/checked-selector 和一些参考: https : //api.jquery.com/checked-selector
eventually remove your action selector using .not(this)
最终使用.not(this)
删除操作选择器
Try this : 尝试这个 :
$(document).ready(function () {
$(".custom").change(function () {
$(".custom-selector").prop("checked", true);
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.