Question

我有一个表单工作，更改下拉列表的值将隐藏或显示一行。我无法工作的是试图隐藏或取消隐藏基于复选框的行。

我的Javascript_tag是

<%= javascript_tag do %>
        $(document).ready(function(){
  //     if($("#observation_discussed_with_employee").is('checked'){
              $(".hidden_option_date_discussed").fadeIn('slow');
              alert("test");
    //     }
         });
 <% end %>

style_add.css是

.hidden_option{
    display: none;
}

.hidden_option_date_discussed{
    display: none;
}

我有与<%= stylesheet_link_tag "style_adds" %>链接的样式表（其他的hide / show工作，所以我知道我可以使用这个样式表

复选框字段和我要隐藏/取消隐藏的后续字段位于

之下

    <tr>
              <div id="discussed">
                <td><%= f.label :discussed_with_employee %></td>
                <td><%= f.check_box :discussed_with_employee  %></td>
              </div>
        </tr>

        <tr class="hidden_option_date_discussed">

如果我按照所示的if语句运行页面，我会收到警告框。但是，如果我取消标记if语句，那么我没有看到警报。

        <div class="field" >
          <td><%= f.label :date_discussed %></td>
          <td><%= f.date_select( :date_discussed,  :default => 0.days.from_now, min: 1.year.ago) %></td>
        </div>
</tr>

Answer 1

您的问题是您正在使用if语句。 if语句的工作方式是它触发一次，就是这样。您正在寻找的功能是change()。所以它应该是：

$(document).ready(function(){
    $("#observation_discussed_with_employee").change(function(){
        if($("#observation_discussed_with_employee").is('checked'){
            $(".hidden_option_date_discussed").fadeIn('slow');
            alert("test");
        }
    });
});

每次#observation_discussed_with_employee的值发生变化时都会触发if语句（所以当它被选中或未选中时）。

编辑：正如评论中的某些人所说，您仍需要使用fadeOut制作一个else语句，因此它可以双向工作。

Answer 2

似乎问题是由于无法绑定到复选框而导致的。我做了一些不同的事情并将复选框更改为“是/否”，其值设置为true和false。

我在javascript中添加了以下内容

 if($("#observation_testchk").val() == "true"){
         $(".hidden_option_date_discussed").fadeIn('slow');
          }


   $("#observation_testchk").change(function(){
             if($("#observation_testchk").val() == "true"){
            //if($("#observation_testchk").val() == 1){
               $(".hidden_option_date_discussed").fadeIn('slow');
               }
            else if ($("#observation_testchk").val() == "false"){
                $(".hidden_option_date_discussed").fadeOut('slow');
                }
           });

并添加了此字段

          <div class="field">
            <td><%= f.label :testchk %></td>
             <td><%= f.select :testchk, [['Yes','true'],['No','false']] %></td>
          </div>

这给了我一个是/否的下拉列表。选择是或否将适当地显示/隐藏其他字段。我仍然需要稍微清理一下代码，但主要的教训是：

我无法让JS绑定到一个复选框。但是，它会绑定到下拉列表。

无法根据复选框取消隐藏/隐藏表格行。

2 个答案: