[英]jQuery Check if a Radio Button is Selected or not
我有一个如下表,并带有单选按钮以选择表行。
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="radio">
</label>
</td>
<td class="text-center"><img class="img-rounded img-responsive" alt="exaple-image" src="images/covers/02.jpg"></td>
</tr>
<tr class="selected-row">
<td>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="radio" checked>
</label>
</td>
<td class="text-center"><img class="img-rounded img-responsive" alt="exaple-image" src="images/covers/01.jpg"></td>
</tr>
<tr>
<td>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="radio">
</label>
</td>
<td class="text-center"><img class="img-rounded img-responsive" alt="exaple-image" src="images/covers/03.jpg"></td>
</tr>
<tr>
<td>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="radio">
</label>
</td>
<td class="text-center"><img class="img-rounded img-responsive" alt="exaple-image" src="images/covers/04.jpg"></td>
</tr>
<tr>
<td>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="radio">
</label>
</td>
<td class="text-center"><img class="img-rounded img-responsive" alt="exaple-image" src="images/covers/05.jpg"></td>
</tr>
</tbody>
</table>
</div>
现在,当我选择一个单选按钮时,我要突出显示该行并从其他行中删除突出显示。
// Table: Add class row selected
$('.table tbody :radio').on('check uncheck toggle', function (e) {
var $this = $(this),
check = $this.prop('checked'),
toggle = e.type == 'toggle',
checkboxes = $('.table tbody :radio'),
checkAll = checkboxes.length == checkboxes.filter(':checked').length
$this.closest('tr')[check ? 'addClass' : 'removeClass']('selected-row');
if (toggle) $this.closest('.table').find('.toggle-all :radio').checkbox(checkAll ? 'check' : 'uncheck');
});
错误:
它突出显示选定的行,但不会删除先前选定行的突出显示。
尝试这个:
// Table: Add class row selected
$('.table tbody :radio').change(function() {
$('.table tbody :radio:checked').closest('tr').addClass('selected-row');
$('.table tbody :radio:not(:checked)').closest('tr').removeClass('selected-row');
});
使用此功能也可以。
$('.table tbody :radio').on('click',function(){
$(this).closest("tr").addClass("selected-row");
$(".table tbody :radio").not(this).closest("tr").removeClass("selected-row")
});
把两美分扔在桌子上。
您可以将一个类添加到最接近的tr(在您的示例中为父级单选按钮),然后从最接近的tr兄弟中删除该类。
$('.table').on('change', ':radio', function() {
$(this).closest('tr').addClass('selected-row').siblings('tr').removeClass('selected-row');
});
试试这个
$('#element').click(function() {
if($('#radio_button').is(':checked')) { alert("it's checked"); }
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.