初心者jQueryの質問、レールのチェックボックス

Question

私はちょうど、チェックボックスがオンになっているかどうかに応じて、いくつかのCSSを変更するために私のアプリでjQueryのabitを使用し始めました。ビュー：

<script type="text/javascript"> 
    $(document).ready(function() { 
    if($("#area-1").is(':checked')) { 
     alert('checked!'); 
    } else { 
     alert('not checked!'); 
    } 
    }); 
</script> 

そして、これが元で私のチェックボックスに表示されているものです：フォームの

<div class="filter_options_container"> 
    <form class="form">  
    <fieldset class="filter_form_fieldset areas"> 
     <input id="area-1" name="areas[]" type="checkbox" value="1" /> 
     <label for="area-1"><p1>Area1</p1></label> 

     <input id="area-2" name="areas[]" type="checkbox" value="2" /> 
     <label for="area-2"><p1>Area2</p1></label> 
    </fieldset> 
    <div class="form_filter_button"> 
     <p2><input type="submit" value="Filter"/></p2> 
    </div> 
    </form> 
</div> 

編集
Railsのビューコード：

<div class="filter_options_container"> 
    <form class="form"> 

    <fieldset class="filter_form_fieldset areas"> 
     <% Area.all.each do |a| %> 
     <%= check_box_tag 'areas[]', a.id, false, :id => "area-#{a.id}" %> 
     <label for="area-<%= a.id %>"><p1><%= a.name %></p1></label> 
     <% end %> 
    </fieldset> 

    <div class="form_filter_button"> 
     <p2><input type="submit" value="Filter"/></p2> 
    </div> 
    </form> 
</div> 

私はarea1のボックスをチェックしてフォームを送信すると「チェックされました」という警告メッセージを表示することを期待していましたが、「チェックされていません」という理由だけが返されます。

ありがとうございました！

Answer 1

area-1要素のchange/click*イベントにバインドされたイベントハンドラが不足しているようです。あなたが持っているコードは、DOMがロードされているときにのみアラートを呼び出し、値が変更されていないときにはアラートを呼び出します。私はあなたが

* ので、クリックイベントが代わりに推奨されchange event does not fire at the same point in time across browsersとの遊びを持っているため、あなたが

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#area-1").click(function() { 
     alert(this.checked? 'checked!' : 'not checked!'); 
    }); 
    }); 
</script> 

Example codeような何かをしたいと思います。しかし、jQueryはこの問題をブラウザ間で解決します。

Answer 2

あなたはこの試みることができます：あなたはチェックボックスがクリックされたときに発生するために何かをしたい場合は、チェックボックスにイベントハンドラを登録する必要があります

<script type="text/javascript"> 
    $(document).ready(function() { 
    if($("#area-1:checked").length > 0) { 
     alert('checked!'); 
    } else { 
     alert('not checked!'); 
    } 
    }); 
</script> 

Answer 3

を。

$(document).ready(function() { 
    $("#area-1").click(function(){ 
    if($(this).is(':checked')) { 
     alert('checked!'); 
    } else { 
     alert('not checked!'); 
    } 
    }); 
}); 

あなたはロジックがフォーム上に発射したい場合は、あなたがjsfiddleにこの$("form").submit();

$("form").submit(function() { 
    if ($("#area-1").is(':checked')) { 
     alert('checked!'); 
    } else { 
     alert('not checked!'); 
    } 
}); 

例に機能を登録することができ提出します。

Answer 4

ドキュメントの準備ができたら、関数を呼び出すようです。最初はチェックボックスがチェックされていないので、常にチェックされません！あなたがこれをしたい場合は、Submitボタンを聞いて、チェックされたステータスを評価することができます。