If checked, show different checkbox

Question

I am in need of building a form, all checkboxes, which show one after another. So if one checkbox is checked, another shows below. Only when the one above is checked. The form will contain hundreds of checkboxes as many options. so Ifelse statements wouldn't be suitable. The data for each checkbox will be parsed from xml file. The only code that seems to stick for this is

$('#chkCheckBox').on('click', function (){

    var nextID, body, nextEl;

    nextID = $(this).attr(target);
    nextEl = $('#' + nextID);

    if(nextEl.style.visibility == 'hidden') {
        nextEl.style.visibility = 'display'
    }

})

Just after a little guidance please. Hope I made sense, feel like I'm going round in circles.

Answer 1

nextEl is a jquery object, not a DOM object, so has no style property. Use jquery .show() and .is()

if(!nextEl.is(':visible')) {
     nextEl.show()
}

You also appear to be using the same id for every checkbox ( chkCheckBox ), dont do this, instead use a class and attach your jquery event to that.

 $('.cb').on('click',function(){ nextID = $(this).attr('target'); nextEl = $('#' + nextID); if(!nextEl.is(':visible')) { nextEl.show(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div><input id="cb1" type="checkbox" class="cb" target="cb2"></div> <div><input id="cb2" type="checkbox" class="cb" target="cb3" style="display:none"></div> <div><input id="cb3" type="checkbox" class="cb" target="cb4" style="display:none"></div>