Show more if checkbox is checked with javascript

Question

what I'm trying to do is set up a form, that shows different checkboxes. If a checkbox is checked some additional checkboxes should show up below and ALL should be checked automatically until the user unchecks them. If the user unchecks the inital checkbox all checkboxes should hide again and uncheck!

My form looks like this:

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

I found various scripts but noone of them does what I need and I'm totally bad with javascripts.

Best regards!

Answer 1

Hope you are looking for a solution like below

You have a checkbox called ParentCheckBox with id myParentCheckbox and the submenu grouped by a div as shown below

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>

Now on selecting the ParentCheckBox the mySubMenu with the 3 check boxes will be selected and on deselecting the ParentCheckBox the mySubMenu with 3 check boxes will be hidden with the check boxes inside the mySubMenu unchecked.

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

Refer Fiddle link here