JQuery вопрос новичка, флажки в рельсах

Question

Я только начинаю пытаться использовать abit из jQuery в своем приложении, чтобы изменить некоторые CSS, в зависимости от того, установлен флажок или нет, я начинаю с этого бита кода в моем представлении:

<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>

edit
Код представления 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

Если вы хотите, чтобы что-то происходило при нажатии флажка, вам необходимо зарегистрировать обработчик события для флажка.

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

Если вы хотите, чтобы логика запускалась при отправке формы, вы можете зарегистрировать функцию на $("form").submit();

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

Пример этого на jsfiddle .

Answer 2

Похоже, вам не хватает обработчика событий, привязанного к событию change/click* элемента area-1. Код, который у вас есть, будет вызывать предупреждение только при загрузке DOM, а не при изменении значения. Я думаю, что вы хотите что-то вроде

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

Пример кода , чтобы вы могли сыграть с

* событие изменения не запускается в один и тот же момент времени во всех браузерах , поэтому рекомендуется использовать событие click. Однако jQuery решает эту проблему в разных браузерах.

Answer 3

Кажется, вы вызываете функцию, когда документ готов. Изначально check bos не проверяется, поэтому всегда возвращается «not check!» Если вы хотите сделать это, вы можете прослушать кнопку отправки, чтобы оценить проверенный статус.

Answer 4

Вы можете попробовать это:

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