1

div 要素をクリックしたときにチェックボックスをオンまたはオフにする、よりクリーンで簡単な方法を見つけようとしています。これは私が現在使用しているコードで、チェックには機能しますが、チェックを外すと機能しません。

http://codepen.io/jimmykup/full/xkoqJ

私が書いたことをより速く、そして/またはより簡単な方法で行うことができることは理解していますが、その方法について途方に暮れています。

注：javascriptを介して挿入されるチェックボックスを使用しています。

HTML:

<div class="container">

  <input type="checkbox" class="confirm" name="ld_Confirm" id="ld_Confirm"><div class="click-me unchecked">Click here to check the checkbox.</div>

</div>

jQuery:

(function() {

$('.click-me').before('<input type="checkbox" class="confirm" name="ld_Confirm" id="ld_Confirm">');

$(".container .click-me.unchecked").click(function() {
  $(".confirm").prop("checked", true);
  $(".click-me").toggleClass("unchecked");
  $(".click-me").toggleClass("checked");
});

$(".container .click-me.checked").click(function() {
  $(".confirm").prop("checked", false);
  $(".click-me").toggleClass("unchecked");
  $(".click-me").toggleClass("checked");
});

})();
4

2 に答える 2

1

問題は、clickドキュメントの読み込み時にイベント ハンドラーを作成していることですが、コンテナーのクラスを切り替えているため、ハンドラーがdiv. つまり、コードが読み込まれる時点では、divclassuncheckedを持つ s がないため、イベント ハンドラーは何にもバインドされません。

簡単な解決策は、イベント委任を使用してハンドラーを動的にバインドすることです。

$(".container").on('click','.click-me.unchecked',function() {
    $(".confirm").prop("checked", true);
    $(".click-me").toggleClass("unchecked");
    $(".click-me").toggleClass("checked");
});
$(".container").on('click','.click-me.checked',function() {
    $(".confirm").prop("checked", false);
    $(".click-me").toggleClass("unchecked");
    $(".click-me").toggleClass("checked");
});

ただし、より良いアプローチが存在します。checkedチェックボックスのプロパティを独自の逆に設定するだけで、コードを大幅に合理化できます。そうすることで、委譲の必要性がなくなり、実際、checkedanduncheckedクラスの必要性が完全になくなります (スタイル設定や他のスクリプトでそれらを使用していない場合):

$(".container").on('click','.click-me',function() {
    $(".confirm").prop("checked", !$(".confirm").prop("checked"));
});

http://jsfiddle.net/mblase75/bNkxG/

于 2012-10-05T17:30:22.600 に答える
0 
$('.click-me').click(function() {
    var checkBoxes = $(".confirm");
    checkBoxes.attr("checked", !checkBoxes.attr("checked"));
});

ここから

あなたはいつでもグーグルやSOを検索して、「jqueryトグルチェックボックス」を探すことができます

このdivがドキュメントのロード時に存在しない場合

$(document).on( 'click' , '.click-me', (function() {
    var checkBoxes = $(".confirm");
    checkBoxes.attr("checked", !checkBoxes.attr("checked"));
});

このクリックが発生したときに存在する限り、ページの読み込み時にクラス「.confirm」のチェックボックスが存在するかどうかは関係ありません。

于 2012-10-05T17:24:31.417 に答える