0

私は次のものを持っています;

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

しかし、前述のように 2 点目はできませんでした。

これを行うのを手伝ってくれませんか...

よろしく、ありがとう。

4

4 に答える 4

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();

または、イベント ハンドラーを関数に入れて、ページ読み込み時に呼び出します。

于 2013-04-02T13:39:31.927 に答える
1 
$(document).ready(function () {
    $('.trp input[type=checkbox][checked=checked]').each(function (index, element) {
        var button = $('.trp button:eq(' + $(this).index() + ')').addClass('active');
    });
});

jsfiddle

于 2013-04-02T13:39:39.493 に答える