使用 jquery 选择/取消选择所有复选框以及所选行的颜色更改

发布于 2024-12-19 22:42:15 字数 313 浏览 4 评论 0原文

我有一个表，其中每行都有一些数据，用户可以提交所有行或单行或某些行。所以，现在每一行都有一个复选框，如果用户选中该复选框，则应该更改该行的背景颜色（我已经使用 jquery 实现了这一点）。现在有另一个复选框可以选择所有这些复选框，我也用 jquery 实现了这个。现在的问题是，当我选择所有复选框时，行背景颜色不会更改，但是当我检查各个行时，它会发生更改。作为一名新手编码员，我可以理解点击事件没有发生，因此背景颜色没有改变。所以我使用了change事件而不是click，但它仍然是一样的。选择全部和行背景颜色更改的功能运行良好，但各自独立。需要有关此方面的帮助...

提前致谢，新手编码员。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淡紫姑娘！ 2024-12-26 22:42:15

没有你的任何代码我尝试了一些东西。看看您是否可以应用您的代码。 (工作示例)

HTML

<table>
    <thead>
        <tr>
            <th><input type="checkbox" name="selectAll" id="selectAll" /></th>
            <th>Row name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 1</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 2</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 3</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 4</td>
        </tr>
    </tbody>
</table>

CSS

.selected { background-color: #ffff00; }

Javascript

jQuery(function($) {
    $('tbody :checkbox').change(function() {
        $(this).closest('tr').toggleClass('selected', this.checked);
    });
    $('thead :checkbox').change(function() {
        $('tbody :checkbox').prop('checked', this.checked).trigger('change');
    });
});

Without any of your code I tried something. See if you can apply to your code. (working example)

HTML

<table>
    <thead>
        <tr>
            <th><input type="checkbox" name="selectAll" id="selectAll" /></th>
            <th>Row name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 1</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 2</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 3</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 4</td>
        </tr>
    </tbody>
</table>

CSS

.selected { background-color: #ffff00; }

Javascript

jQuery(function($) {
    $('tbody :checkbox').change(function() {
        $(this).closest('tr').toggleClass('selected', this.checked);
    });
    $('thead :checkbox').change(function() {
        $('tbody :checkbox').prop('checked', this.checked).trigger('change');
    });
});

回复收藏 0 原文

堇年纸鸢 2024-12-26 22:42:15

这是您的请求的一个简单示例，只需将所有这些代码复制/粘贴到新页面中并运行它。享受

<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.4.2/jquery.min.js" type="text/javascript"
charset="utf-8"></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);
}
});

</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>

this is a simple example for your request just copy/paste all this code, in new page and run it. Enjoy

<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.4.2/jquery.min.js" type="text/javascript"
charset="utf-8"></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);
}
});

</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>

回复收藏 0 原文

~没有更多了~