中。但是当我单击我的
时,如何使其也能正常工作?
大家好:)我有此代码,单击复选框时,该代码会将"选定"类添加到表中的
<tr>
<td><input type="checkbox"></td>
<td><img src="../gallery/thumbnails/1.png" alt=""></td>
<td>tryb</td>
<td>png</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><img src="../gallery/thumbnails/2.png" alt=""></td>
<td>test</td>
<td>png</td>
</tr>
<script type="text/javascript">
$(':checkbox').change(function () {
$(this).parents('tr').toggleClass('selected', this.checked);
}).change();
</script>
也为tr
添加点击事件:
<script type="text/javascript">
$(':checkbox').change(function () {
$(this).parents('tr').toggleClass('selected', this.checked);
}).change();
$("tr").click(function(){
if($(this).find(":checkbox").is(":checked"))
$(this).find(":checkbox").attr("checked",false);
else
$(this).find(":checkbox").attr("checked",true);
$(":checkbox").change();
});
</script>
再添加一个事件侦听器
$('tr').on('click',function(){
$(this).toggleClass('selected');
});
并在checkbox
更改处理程序中添加e.stopPropagation()
-
$(':checkbox').change(function (e) {
e.stopPropagation();
$(this).parents('tr').toggleClass('selected', this.checked);
}).change();
$('tr').click(function(){
$(this).find('input[type=checkbox]').prop('checked', true);
});
当tr
点击时,你可以跳跳虎复选框点击事件
$(':checkbox').change(function (event) {
$(this).parents('tr').toggleClass('selected', this.checked).addClass("checkbox");
});
// when click on tr it trigger checkbox click event
$('tr').click(function(event) {
if(!$(this).is('.checkbox')) {
$(this).find('input[type="checkbox"]').click();
}
$(this).removeClass('checkbox');
});
更新使用棘手的方法防止复选框中的双重效果