29

Check Allすべてのチェックボックスをチェックするこの機能があります。そのためにJQueryを使用しています。

しかしon change、クラスをラッパー div に切り替えるこの関数もあります。

$('input[type="checkbox"]').on('change', function(){
    $(this).closest('div').toggleClass('highlight');
});

この関数は、チェックボックスをクリックすると実行されますが、 をクリックすると実行されませんCheck all。

JQueryを使用して手動でイベントを発生させる方法はありますか? または、より良い解決策はありますか？

ありがとう

編集：

簡略化された HTML は次のとおりです。

<a id="check_all">Check All</a>
<div>
    <input type="checkbox" name="cb" value="abc">ABC<br>
</div>
<div>
    <input type="checkbox" name="cb" value="pqr">PQR<br>
</div>
<div>
    <input type="checkbox" name="cb" value="xyz">XYZ<br>
</div>

これがJSFiddleです

http://jsfiddle.net/DarcFiddle/d4VTh/

4

5 に答える 5

51

クリックしてすべてをチェックした後、このように change() イベントを呼び出す必要があります

$(document).ready(function(){
    $("input[type='checkbox']").on('change', function(){
        $(this).closest('div').toggleClass('highlight');
    });

    $("#check_all").on('click', function(){
        $("input[type='checkbox']").prop('checked', true).change();
    });
});
于 2013-06-03T08:11:43.850 に答える
3

これによりイベントがトリガーchangeされますが、最初にバインドした後でのみです。

$('input[type="checkbox]').trigger('change');
于 2013-06-03T08:09:00.823 に答える
0

コードのこのフィドル変更を確認してください：http://jsfiddle.net/d4VTh/51/

$(document).ready(function(){
    $("input[type='checkbox']").on('change', function(){
        if (this.checked)
            $(this).closest('div').addClass('highlight');
        else 
            $(this).closest('div').removeClass('highlight');
    });

    $("#check_all").on('click', function(){
        var item = $("input[type='checkbox']")
        item.prop('checked', !item.prop('checked')).change();
    });
});
于 2014-06-30T14:55:43.380 に答える
0

visnu の回答とほぼ同じですが、直接 click() を呼び出すと、jQuery によってバインドされたすべてのクリック イベントが発生します。これをデモすると、ボックスのチェックも外されていることがわかりますが、彼の答えは、クリックされたままの状態でハイライトを削除するだけです。

$(document).ready(function(){
    $("input[type='checkbox']").on('change', function(){
        $(this).closest('div').toggleClass('highlight');
    });

    $("#check_all").on('click', function(){
        $("input[type='checkbox']").click();
    });
});
于 2014-06-06T15:48:04.087 に答える
0

あなたはこれを試すことができます、

$(document).on('change','input[type="checkbox]' ,function(){
     // $this will contain a reference to the checkbox
      var $this = $(this);   
    if ($this.is(':checked')){//To CHECK CHECK BOX IS CHECKED OR NOT
         $(this).closest('div').toggleClass('highlight');
    }
});

それが役に立てば幸い、

于 2013-06-03T08:08:26.747 に答える