如果選中，則顯示其他復選框

Question

我需要建立一個表單，所有復選框，一個接一個顯示。 因此，如果選中了一個復選框，則下面將顯示另一個復選框。 僅當選中以上一項時。 表單將包含數百個與許多選項一樣的復選框。 因此，Ifelse語句不合適。 每個復選框的數據將從xml文件中解析。 似乎唯一可以堅持的代碼是

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

    var nextID, body, nextEl;

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

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

})

請稍作指導。 希望我有道理，覺得我正在轉圈。

Answer 1

nextEl是一個jquery對象，而不是DOM對象，因此沒有style屬性。 使用jquery .show()和.show() .is()

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

您似乎還為每個復選框（ chkCheckBox ）使用了相同的ID，請不要這樣做，而是使用一個類並將jquery事件附加到該類。

 $('.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>