如果使用javascript選中了復選框，則顯示更多

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

我找到了各種腳本，但是沒有一個腳本可以滿足我的需要，我對JavaScript完全不滿意。

最好的祝福！

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();
    }
});

在這里參考小提琴鏈接