Handling of JQUERY parents and siblings

Question

I have a question in Jquery. I have the following code, example:

<div class="col-sm-2">
    <div class="md-checkbox">
        <input type="checkbox" id="checkbox1" class="md-check">
    </div>
</div>

<div class="col-sm-2" hidden="hidden">
    <input type="text" class="form-control" id="form_control_1">
</div>

<div class="col-sm-2" hidden="hidden">
    <input type="text" class="form-control" id="form_control_2">
</div>

<div class="col-sm-2" hidden="hidden">
    <input type="text" class="form-control" id="form_control_3">
</div>

What I need to do is that when someone scores the checkbox1, it must show the inputs of divs who have the attribute Hidden.

In case it would be something like climbing up to the father of checkbox, then climb up to the father of that div, then set as visible as Divs neighbours.

How can I do that?

Answer 1

Something like that?

$(document).ready(function() {
    $("#checkbox1").click(function(){
        var checked = $(this).is(":checked");
        if(checked)
            $(this).parent().parent().siblings("div[hidden=hidden]").each(function(i, div) {
                $(div).removeAttr("hidden").show();
            });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-2">
    <div class="md-checkbox">
        <input type="checkbox" id="checkbox1" class="md-check">
    </div>
</div>

<div class="col-sm-2" hidden="hidden">
    <input type="text" class="form-control" id="form_control_1">
</div>

<div class="col-sm-2" hidden="hidden">
    <input type="text" class="form-control" id="form_control_2">
</div>

<div class="col-sm-2" hidden="hidden">
    <input type="text" class="form-control" id="form_control_3">
</div>

This is one way to do it, exactly as you described: from the checkbox, you get the father’s father and then the nodes of the same level that have the attribute hidden. For each, remove the attribute and make it visible.