Question

我有一系列复选框，我想让它更具移动性，所以我隐藏了复选框并使用标签作为按钮。我想要做的是通过在点击时将标签的颜色从黄色变为绿色来提供用户反馈，然后在再次点击时将其更改为黄色。我拉着头发试图理解为什么我用的不起作用。

<div id="div">
    <label for="checkbox" id="label1" class="bg-warning text-center pointer" style="width:100px; padding:8px">
            <input type="checkbox" name="checkbox1" id="checkbox1" value="checked1" style="display:none">test
        </label>
    </div>

    <label for="checkbox" id="label2" class="bg-warning text-center pointer" style="width:100px; padding:8px">
            <input type="checkbox" name="checkbox2" id="checkbox2" value="checked2" style="display:none">test
        </label>
    </div>
</div>

<script>
    $(document).ready(function(){
        $('#div').on('click', function(e) {
            $('#div').each( function( index, element) {

                var el = $(element);

                if($(el).hasClass('bg-warning')) {
                    $(el).removeClass('bg-warning').addClass('bg-success');
                } else {
                    $(el).removeClass('bg-success').addClass('bg-warning');
                }
            });
        });
    });
</script>

Answer 1

首先，我会给div提供唯一的ID。然后你可以为它们设置一个公共类（即：div）：

<div id="div1" class="div">
    <label for="checkbox" id="label1" class="bg-warning text-center pointer" style="width:100px; padding:8px">
        <input type="checkbox" name="checkbox1" id="checkbox1" value="checked1" style="display:none" />test
    </label>
</div>
<div id="div2" class="div">
    <label for="checkbox" id="label2" class="bg-warning text-center pointer" style="width:100px; padding:8px">
        <input type="checkbox" name="checkbox2" id="checkbox2" value="checked2" style="display:none" />test
    </label>
</div>

...

$(document).ready(function () {
    $('.div').on('click', function (e) {
        // Find the labels within the clicked div.
        var el = $('label', this);

        // Toggle their classes.
        // No loop needed, as the selector will bring all the elements
        // and apply the change to each one of them.            
        $(el).toggleClass('bg-warning').toggleClass('bg-success');
    });
});

Demo

<强>更新

在评论中聊天后，我认为你还有两个选择。

在为标签设置#属性时（例如：for），请务必使用for="#checkbox2"。

首先，您要继续检查div中的点击次数/点击次数：

$(function () {    
    $('.div').on('click', function () {
        var label = $('label', this);
        var checkbox = $('input[type=checkbox]', this);

        label.toggleClass('bg-warning bg-success');

        // Checking the label class and deciding if we
        // need to check the checkbox.
        checkbox.prop('checked', label.hasClass('bg-success'));
    });

    $('label input[type=checkbox]').on('click', function(e) {
        // As what's actually clicked is the label, let's
        // ignore the default behavior.
        e.preventDefault();

        // And transfer the click to the div itself.
        $(this).parents('.div').trigger('click');        
    });
});

Demo

其次，您只需处理标签中的点击/点按（我建议）：

$(function () {    
    $('label').on('click', function () {
        $(this).toggleClass('bg-warning bg-success')
            .find('input[type=checkbox]')
            .prop('checked', $(this).hasClass('bg-success'));
    });
});

Demo

jQuery：点击更改类

1 个答案: