Question

我刚开始尝试在我的应用程序中使用jQuery的abit来改变一些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>

修改的
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>

我期待它在检查区域1框并提交表格时发出警告信息说'已检查'，但它只返回'未检查'为什么会这样？

感谢您的帮助！

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>

Example code 让您玩

* change event does not fire at the same point in time across browsers因此建议使用点击事件。但是，jQuery在浏览器中修复了这个问题。

Answer 3

你可以试试这个：

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

Answer 4

当文档准备就绪时，您似乎正在调用函数。最初检查bos未被检查，所以它总是返回“未检查！”。如果你想这样做，你可能想听取提交按钮评估检查状态。

初学者jQuery问题，rails中的复选框

4 个答案: