4

以下のコードで説明するように、トグルを実装しました。 HTML:

<table>
    <thead>
        <tr>
            <th class="selectCol"><div class="unCheckedCheckBoxAll"></div></th>
            <th class="nosCol">Products</th>
        </tr>
    </thead>
    <tr>
        <td><div class="unCheckedCheckBox"></div></td>
        <td>ABCD</td>
    </tr>
    <tr>
        <td><div class="unCheckedCheckBox"></div></td>
        <td>PQRS</td>
    </tr>
</table>

CSS:

.unCheckedCheckBox, .unCheckedCheckBoxAll
{
   width: 25px;
   height: 25px;
   margin-top: -4px;
   background: transparent url(http://i.stack.imgur.com/tsaPu.png) top left no-repeat;
}
.CheckedCheckBox,.CheckedCheckBoxAll
{
   width: 25px;
   height: 25px;
   margin-top: -4px;
   background: transparent url(http://i.stack.imgur.com/tsaPu.png) 0 -60px;
}

jQuery:

$(".CheckedCheckBox").click(function () {
    $(this).removeClass('CheckedCheckBox').addClass('unCheckedCheckBox');
    if ($(".CheckedCheckBox").length == 0) {
        $('.CheckedCheckBoxAll').removeClass('CheckedCheckBoxAll').addClass('unCheckedCheckBoxAll');
    }
});
$(".unCheckedCheckBox").click(function () {
    $(this).removeClass('unCheckedCheckBox').addClass('CheckedCheckBox');
    if ($(".unCheckedCheckBox").length == 0) {
        $('.unCheckedCheckBoxAll').removeClass('unCheckedCheckBoxAll').addClass('CheckedCheckBoxAll');
    }
});
$(".CheckedCheckBoxAll").click(function () {
    $(this).removeClass('CheckedCheckBoxAll').addClass('unCheckedCheckBoxAll');
    $('.CheckedCheckBox').removeClass('CheckedCheckBox').addClass('unCheckedCheckBox');
});
$(".unCheckedCheckBoxAll").click(function () {
    $(this).removeClass('unCheckedCheckBoxAll').addClass('CheckedCheckBoxAll');
    $('.unCheckedCheckBox').removeClass('unCheckedCheckBox').addClass('CheckedCheckBox');
});

問題は、チェックされていないdivをクリックするとチェックされたdivになりますが、チェックされたdivをクリックすると、クラスがチェックされていてもチェックされていない機能になります。助けて。何が問題なのかわかりません。

jsfiddle リンクは次のとおりです。

http://jsfiddle.net/nscZA/3/

私が使用している画像：

画像

4

2 に答える 2

4

このようにしたい場合は、.on関数を使用してこれを行う必要があります。理由は、関数 (クリックイベント管理) が現在保持されていないクラスに対して適切にバインドされないためです。

$(document).on('click','.unCheckedCheckBox',function () {...rest of your function

注: 可能であれば、テーブル ラッパーと ID を指定して実行するように、最も近いラッパーにバインドを配置します。

$('#mytableid').on('click','.unCheckedCheckBox',function () {

jQuery 1.9.1 の例: http://jsfiddle.net/nscZA/6/

注 スプライトを使用せず (読み込みません)、色を使用します

編集: テーブル ID を持つ古いデリゲート:

<table id='mytablewrapper'>

構文はわずかに異なります。

$('#mytablewrapper').delegate(".CheckedCheckBox", 'click', function () {

デリゲートの例: http://jsfiddle.net/nscZA/7/

注 スプライトを使用せず (読み込みません)、色を使用します

于 2013-05-03T13:38:53.297 に答える
2

バインド イベントはページの読み込み時に保存されるため、クラスにアクションを持たせたい場合は、クラス.CheckedCheckBoxを追加するときにバインディングを追加し、クラスを削除するときにバインディングを削除する必要があります。しかし、これは良いアプローチではありません。toggleClass を使用することは、確かに必要なことです。

ここで私がしたことのフィドル：http://jsfiddle.net/nscZA/8/

偶数をバインドするcheckboxので、追加/削除する必要はありません

$(".checkBox").click(function () {
    $(this).toggleClass('isChecked');
    if ($(".checkBox").length == $(".isChecked").length) {
       $('.checkBoxAll').addClass('checkAllChecked');
    }else{
        $('.checkBoxAll').removeClass('checkAllChecked');
    }
});

チェックされたクラスを追加し、すべてのチェックボックスがチェックされているかどうかを確認します。

私の解決策を調べて、わからないことがあれば質問することをお勧めします。

私はあなたのhtmlクラス/ cssを少し変更したことに注意してください。

応援する

于 2013-05-03T13:53:09.577 に答える