jquery - 确定正确的复选框和按钮

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>

我想做的事，

1. 如果我单击任何按钮，
   则应选中类名等于单击按钮的数据项的复选框，并且
   需要向按钮添加一个名为 .active 的类名。

2. 如果页面加载时任何一个复选框已经被选中，则需要识别与该复选框相关的按钮并需要添加类 .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();

或者将您的事件处理程序放在一个函数中，然后在页面加载时调用它。

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')
    })
})