Question

我有以下内容;

<div class="trp">
    <input class="makeActive" type="checkbox">
    <input class="makeRepeat" type="checkbox">

    <button class="btn" data-item="makeActive">Make Active</button>
    <button class="btn" data-item="makeRepeat" checked="checked">Make Active</button>
</div>

我想做什么，

如果我点击任何一个按钮，那个具有类
的复选框应该检查等于单击按钮的数据项的名称和
需要在按钮中添加一个名为.active的类名。
如果页面加载时已选中任何复选框，则需要识别与该复选框相关的按钮，需要添加 class .active。

我设法在使用此

$('.trp .btn').click(function(){
    var elem = $(this).attr('data-item');
    var cb = $(this).closest('.trp').find('.'+elem);


    if (cb.is(':checked')) {
        cb.prop('checked',false);
    } else {
        cb.prop('checked',true);
    }           
});

但我不能像上面提到的那样做第二点。

你能帮我做一下......

问候，谢谢。

Answer 1

绑定后触发点击事件处理程序：

$('.trp .btn').click(function(){
    var elem = $(this).attr('data-item');
    var cb = $(this).closest('.trp').find('.'+elem);


    if (cb.is(':checked')) {
        cb.prop('checked',false);
    } else {
        cb.prop('checked',true);
    }           
})
// Trigger click
.click();

或者将您的事件处理程序放在一个函数中，并在pageload上调用它。

Answer 2

$(document).ready(function () {
    $('.trp input[type=checkbox][checked=checked]').each(function (index, element) {
        var button = $('.trp button:eq(' + $(this).index() + ')').addClass('active');
    });
});

jsfiddle

Answer 3

试试这个：

$('.trp input:checkbox').each(function () {
    var this = $(this);
    if (this.is(':checked')) {
        $('.trp input:button').filter(function () {
            return ($(this).data('item') === this.attr('class'))
        }).addClass('.active');
    }
});

Answer 4

您需要添加以下代码：

$(document).ready(function(){
    $('.btn').is(':checked').each(function(){
        var elem = $(this).attr('data-item');
        $('.'+elem).addClass('active')
    })
})

确定正确的复选框和按钮

4 个答案: