我必须开发一种包含带有部分和子部分的表格的表单。在部分的单击事件中，子部分应该选择/取消选择。并且在取消选中每个子部分时，我的部分应该取消选中。我有要在行单击和复选框单击上执行此操作。 http://imgboot.com/images/sureshdasari/selectdeselectcheckboxes.gif这就是我想要的，但在这张图片中，只有复选框单击工作，我也希望在行单击上执行相同的操作。是否有人有想法，请帮助我。如果使用 jquery 更容易，那么也可以为我提供帮助。
提前致谢。
这是我的代码链接http://pastebin.com/J5bnXbN2我想在行上有相同的东西点击
最佳答案
试试这个例子
<table>
<tr>
<td><input type="checkbox" name="chk[]"/></td>
<td>ID</td>
<td>Name</td>
<td>asd</td>
<td>asd</td>
</tr>
<tr>
<td><input type="checkbox" name="chk[]"/></td>
<td>ID</td>
<td>Name</td>
<td>asd</td>
<td>asd</td>
</tr>
<tr>
<td><input type="checkbox" name="chk[]"/></td>
<td>ID</td>
<td>Name</td>
<td>asd</td>
<td>asd</td>
</tr>
$('tr').click(function() {
var checkbox = $(this).find('td:first').find('input');
if(checkbox.is(':checked')) {
checkbox.attr('checked', false);
}else {
checkbox.attr('checked', true);
}
});
编辑:这是包含您提供的代码的完整工作示例
<html>
<head>
<title>How to highlight the selected row in table/gridview using jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#checkall").live('click',function(event){
$('input:checkbox:not(#checkall)').attr('checked',this.checked);
//To Highlight
if ($(this).attr("checked") == true)
{
//$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#FF3700");
$("#tblDisplay").find('tr:not(#chkrow)').css("background-color","#FC9A01");
}
else
{
//$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#fff");
$("#tblDisplay").find('tr:not(#chkrow)').css("background-color","#FFF");
}
});
$('input:checkbox:not(#checkall)').live('click',function(event)
{
if($("#checkall").attr('checked') == true && this.checked == false)
{
$("#checkall").attr('checked',false);
$(this).closest('tr').css("background-color","#ffffff");
}
if(this.checked == true)
{
$(this).closest('tr').css("background-color","#FC9A01");
CheckSelectAll();
}
if(this.checked == false)
{
$(this).closest('tr').css("background-color","#ffffff");
}
});
function CheckSelectAll()
{
var flag = true;
$('input:checkbox:not(#checkall)').each(function() {
if(this.checked == false)
flag = false;
});
$("#checkall").attr('checked',flag);
}
I'm sorry for this mistake. Since you click on the input, who is in the entire tr two events are triggered. So you need to assing click events on all cells, except those who checkboxes are in. Here is the fix:
$('tr').find('td:gt(0)').click(function() {
var checkbox = $(this).parent().find('td:first').find('input');
if(checkbox.is(':checked')) {
checkbox.attr('checked', false);
}else {
checkbox.attr('checked', true);
}
});
$('tr#chkrow').find('th:gt(0)').click(function() {
var checkbox = $('input#checkall');
if(checkbox.is(':checked')) {
checkbox.attr('checked', false);
$('tr').find('td:first').find('input').attr('checked', false);
}else {
checkbox.attr('checked', true);
$('tr').find('td:first').find('input').attr('checked', true);
}
});
});
</script>
</head>
<body>
<table width="50%" cellspacing="0" border="0" align="left" id="tblDisplay" cellpading="0"
style="font-family: verdana; font-size: 10px;">
<thead>
<tr id="chkrow">
<th>
<input type="checkbox" id="checkall" />
</th>
<th>
Sr.
</th>
<th style="text-align: left;">
First Name
</th>
<th style="text-align: left;">
Last Name
</th>
<th>
Country
</th>
<th>
Marital Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="1" />
</td>
<td style="text-align: center;">
1
</td>
<td style="text-align: left;">
Adeel
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="2" />
</td>
<td style="text-align: center;">
2
</td>
<td style="text-align: left;">
Omer
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="3" />
</td>
<td style="text-align: center;">
3
</td>
<td style="text-align: left;">
Umer
</td>
<td style="text-align: left;">
Mukhtar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="4" />
</td>
<td style="text-align: center;">
4
</td>
<td style="text-align: left;">
Mark
</td>
<td style="text-align: left;">
Waugh
</td>
<td style="text-align: center;">
Australia
</td>
<td style="text-align: center;">
Married
</td>
</tr>
</tbody>
</table>
</body>
</html>
关于javascript - 在 JavaScript 中单击行时选择/取消选择复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13796038/