使用jquery做复选框操作

Ceremony_feeling

于 2019-10-27 20:01:08 发布

阅读量342

点赞数

分类专栏：学习

本文链接：https://blog.youkuaiyun.com/Ceremony_feeling/article/details/102770597

版权

学习专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用jQuery实现复选框操作，当选中或取消选中复选框时，其所在行背景色会相应变化，以实现交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用jquery做复选框操作

要求：1、选中其中一列的复选框时，该复选框所在行的背景色高亮显示（黄色）。
2、取消选中复选框时，所在行的背景色恢复。
代码部分:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    *{
        font-size: 30px;
    }
.red{
    background: red;
}
    #div11{
        width: 200px;
        height: 50px;
        border: 2px solid ;
        border-radius: 20px;
        font-size: 20px;
        text-align: center;
        line-height: 50px;
    }
    td{
        border: 2px solid ;

    }
</style>
<body>
<div id="div01">
    <table>
        <tr>
            <td><input type="checkbox"></td>
            <td>12</td>
            <td>123</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>12</td>
            <td>123</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>12</td>
            <td>123</td>
        </tr>
    </table>
 </div>
<div id="div11"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function(){
        //1.
        $("#div01 input").on('click',function(){
           $(this).attr("flag",true);
               $(this).parent().parent().toggleClass("red");
        });