如果选中，则显示不同的复选框

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() 和 .is()

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

您似乎还为每个复选框使用了相同的 ID (chkCheckBox)，请不要这样做，而是使用 class 并将您的 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>

如果选中，则显示不同的复选框

If checked, show different checkbox

javascript

checkbox

jquery