Question

我必须开发一个包含带有section和sub-section的表的表单。在click部分的click事件中，子部分应该是select / deselcet.And取消选中每个子部分我的部分应该取消选中。我有在行点击以及复选框点击这样做的事情。http://imgboot.com/images/sureshdasari/selectdeselectcheckboxes.gif这是我想要的但是在这个图像中只有复选框点击工作我想在行上点击同样的动作。是否有任何人有想法然后请帮助我。如果使用jquery更容易，那么对我也有帮助。

先谢谢。

以下是我的代码链接http://pastebin.com/J5bnXbN2我想在行点击

上查找相同的内容

Answer 1

试试这个例子

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>

Answer 2

请参阅：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;
});
});

在javascript中单击行选择/取消选中复选框

2 个答案: