1

我想div在单击 a 时将 a 更改为绿色checkbox，然后再次单击复选框时应删除绿色。当我添加$('div.formfld').removeClass('green');添加绿色的动作也消失了。

这是代码：

<head>
    <script>
        $(document).ready(function(){
            $(".clicker").click(function(){
                $('div.formfld').addClass('green');
                $('div.formfld').removeClass('green'); 
            });
        });
    </script>

    <style>
        .formfld{ padding:5px; }
        .grey{ background-color:#CCCCCC; }
        .green{ background-color:#006600; }
    </style>
</head>

<body>
    <div class="formfld grey" id="frm">
        <input type="checkbox" class="clicker" /> 
        Name
    </div>
</body>
4

3 回答 3

5

你们都在添加，然后为每次点击删除类。改为使用toggleClass。此外，使用change元素上的事件来确保无法使用鼠标的用户可以访问：

$(".clicker").change(function(){
    $('div.formfld').toggleClass('green');
});

示例小提琴

于 2013-11-08T10:11:00.397 回答
3

您需要使用toggleClass()来切换类

jQuery(function ($) {
    $(".clicker").click(function () {
        $('div.formfld').toggleClass('green');
    });
});

演示：小提琴

于 2013-11-08T10:11:01.147 回答
3

试试.toggleClass()

$('div.formfld').toggleClass('green');
于 2013-11-08T10:11:10.227 回答