0

我必须开发一个表格，其中包含带有部分和子部分的表格。在部分的点击事件中，子部分应该是选择/取消选择。而且在取消选中每个子部分时，我的部分应该是取消选中。我必须这样做行点击和复选框点击。http://imgboot.com/images/sureshdasari/selectdeselectcheckboxes.gif这就是我想要的，但在这张图片里面只有复选框点击工作我也想对行点击同样的动作。有没有人有想法然后请帮助我。如果使用 jquery 更容易，然后对我也有帮助。

提前致谢。

这是我的代码链接http://pastebin.com/J5bnXbN2我想要在行上单击相同的东西

4

2 回答 2

2

试试这个例子

http://jsfiddle.net/QUwuR/

<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>
于 2012-12-10T06:40:50.503 回答
0

看到这个：http: //jsfiddle.net/RtcBR/3/

$(document).ready(function() {
var flag = false;
var flag2 = false;
$("#checkall").click(function(event) {
    $('input:checkbox:not(#checkall)').attr('checked', this.checked);
    if ($(this).attr("checked")) {
        $("#tblDisplay").find('tr:not(#chkrow)').each(function() {
            $(this).css("background-color", "#FC9A01");
        });
    }
    else {
        $("#tblDisplay").find('tr:not(#chkrow)').each(function() {
            $(this).css("background-color", "#FFF");
        });
    }
    flag2 = true;
});

$('input:checkbox:not(#checkall)').click(function(event) {
    if ($("#checkall").attr('checked') && !this.checked) {
        $("#checkall").attr('checked', false);
        $(this).closest('tr').css("background-color", "#ffffff");
    }
    if (!$("#checkall").attr('checked') && this.checked) {
        if ($('input:checkbox:not(#checkall)').filter(":not(:checked)").length === 0) {
            $("#checkall").attr('checked', true);
        }
    }
    if (this.checked) {
        $(this).closest('tr').css("background-color", "#FC9A01");
        flag = true;
    }
    if (!this.checked) {
        $(this).closest('tr').css("background-color", "#ffffff");
        flag = true;
    }
});

$('tr').click(function() {

    if (!flag) {
        var checkbox = $(this).find('td:first').find('input');
        if (checkbox.is(':checked')) {
            checkbox.attr('checked', false);
            checkbox.closest('tr').css("background-color", "#FFF");
        } else {
            checkbox.attr('checked', true);
            checkbox.closest('tr').css("background-color", "#FC9A01");
        }
    }
    flag = false;
});
$('tr#chkrow').click(function() {
    if (!flag2) {
        var checkbox = $(this).find('th:first').find('input');
        if (checkbox.is(':checked')) {
            checkbox.attr('checked', false);
            $('tr').find('td:first').find('input').attr('checked', false);
            $("#tblDisplay").find('tr:not(#chkrow)').each(function() {
            $(this).css("background-color", "#FFF");
        });
        } else {
            checkbox.attr('checked', true);
            $('tr').find('td:first').find('input').attr('checked', true);
            $("#tblDisplay").find('tr:not(#chkrow)').each(function() {
            $(this).css("background-color", "#FC9A01");
        });
        }
    }
    flag2 = false;
});
});​
于 2012-12-10T10:57:11.157 回答