Question

我要做的是设置一个表单，显示不同的复选框。如果选中了复选框，则下面会显示一些其他复选框，并且应自动检查所有复选框，直到用户取消选中它们。如果用户取消选中初始复选框，则所有复选框应再次隐藏并取消选中！

我的表单如下：

<%= simple_form_for @cr do |f| %>

        <%= f.association :design, as: :check_boxes, label: false, collection: Design.find(1) %>
          <div id="sub_design" style="display:none;">
            <%= f.association :wngs, as: :check_boxes, label: false %>               
          </div>

<% end %>

我发现了各种各样的剧本，但是没有人能够完成我需要的剧本，而且我对javascripts的表现非常糟糕。

祝你好运！

Answer 1

希望您正在寻找下面的解决方案

您有一个名为ParentCheckBox的复选框，其ID为myParentCheckbox，子菜单按div分组，如下所示

HTML：

<div>
    <input type="checkbox" id="myParentCheckbox" name="ParentCheckBox" > ParentCheckBox</input>
    <div id="mySubMenu">
        <input type="checkbox" class="mySubCheckBox" name="ParentCheckBox"> SubCheckBox1</input>
        <input type="checkbox" class="mySubCheckBox" name="ParentCheckBox"> SubCheckBox2</input>
        <input type="checkbox" class="mySubCheckBox" name="ParentCheckBox"> SubCheckBox3</input>
    </div>
</div>

现在选择ParentCheckBox mySubMenu时，将选中3个复选框，取消选中ParentCheckBox mySubMenu时，将隐藏3个复选框未选中mySubMenu内的复选框。

JS：

$("#myParentCheckbox").on("click",function() {
    if($("#myParentCheckbox").is(":checked")) {
        console.log("parent box checked");
        //show the subboxes checked        
        $("#mySubMenu").show();
        $("#mySubMenu .mySubCheckBox").prop("checked",true);

    }
    else {
        console.log("parent box unchecked");
        // uncheck the sub boxes and hide it        
        $("#mySubMenu .mySubCheckBox").prop("checked",false);
        $("#mySubMenu").hide();
    }
});

参考小提琴链接here

如果使用javascript选中复选框，则显示更多

1 个答案: