Question

当我点击div时，我希望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>

Answer 1

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

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

Example fiddle

Answer 2

您需要使用toggleClass()切换班级

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

演示：Fiddle

Answer 3

尝试.toggleClass()

$('div.formfld').toggleClass('green');

第二个动作没有工作onclick

3 个答案: