1

こんにちは私は私のページで次のHTMLを繰り返しています（明らかに、名前、for、id属性はインスタンスごとに変わります）：

<div class="funkyCheckBox">
<label for="uniqueName"> Whatever Text </label>
<input type="checkbox"  name="uniqueName" id="uniqueName" />
</div>

これがいくつかのCSSで行うことは、大きなボタンの外観を与えることです。入力は非表示になり、入力のチェックされた値に応じてdivにクラスを追加します。これには次のJavaScript/jQueryを使用します

$(".funkyCheckBox").live("click, tap", function(event){
    $(this).toggleClass("funkyCheckBoxActive");
    var nextCheckBox = $(this).find("input[type=checkbox]");
    nextCheckBox.prop("checked", !nextCheckBox.prop("checked"));
});

これですべて問題ありませんでしたが、テスト中にラベルテキストをクリックしてもクラスが適用されず、入力の値が切り替えられないことに気付きました...したがって、次を追加しました...

$(".funkyCheckBox label").live("click, tap", function(event){                  
    $(this).parent("div").toggleClass("funkyCheckBoxActive");
    var nextCheckBox = $(this).next("input[type=checkbox]");
    nextCheckBox.prop("checked", !nextCheckBox.prop("checked"));
});

ラベルテキストをクリックすると入力の値が変更されるため、これはすばらしいことですが、親DIVは「funkyCheckBoxActive」クラスを取得/切り替えていません。コールバック関数内で使用console.log($(this).parent("div"))し、domオブジェクトの属性を出力している理由がわかりません。toggleClass私が適用されない理由を誰かが知っていますか？

4

2 に答える 2

0

jQuery のバージョンに応じて、コードが機能するかどうかが決まります。チェックボックスを参照するラベルをクリックすると、ブラウザはすでにチェックボックスを切り替えていることに注意してください。したがって、これを行うだけで済みます。

$('#uniqueName').change(function() {
    $(this).parents("div").toggleClass("funkyCheckBoxActive");
});
于 2014-07-15T05:37:17.283 に答える
-2

「live」の代わりに「on」メソッドを使用してください。これは非推奨です。また、LABEL タグの「for」属性は既存の ID を指します。

修正された作業コードは次のとおりです。

<div class="funkyCheckBox">
    <label for="uniqueName"> Whatever Text </label>
    <input type="checkbox"  name="uniqueName" id="uniqueName" />
</div>

と

$(".funkyCheckBox label").click(function(event){
     $(this).parent("div").toggleClass("funkyCheckBoxActive");

     var nextCheckBox = $(this).next("input[type=checkbox]");
     var nextCheckBoxValue = nextCheckBox.val();

     nextCheckBox.val(! nextCheckBoxValue);
}); ​

</p>

編集: ここに jsFiddle リンクがあります

http://jsfiddle.net/RUYWT/

EDIT2 : @Mike Sav: 私はあなたのコードを修正しました。現在、考えられるすべてのケースで動作しています: http://jsfiddle.net/RUYWT/11/

于 2012-10-23T10:15:28.503 に答える