在復選框上顯示/隱藏表單字段已選中/未選中

Question

我使用JavaScript來顯示/隱藏表單中的其他字段，具體取決於是否單擊了相關復選框。 這些字段是隱藏的，並且在選中復選框時會顯示，但在未選中時不要隱藏。 但是，當我再次選中復選框時，這些字段確實隱藏。

我有一個id='cb_post'的復選框和一個onclick命令，可以從我的外部javascript文件中獲取showDiv() 。 我也有id='hiddenDiv'的隱藏字段。

我的JavaScript腳本很簡單：

function showDiv() {
    if (document.getElementById('hiddenDiv').style.display == 'block') {
        (document.getElementById('hiddenDiv').style.display = 'none');
    } else {
        document.getElementById('hiddenDiv').style.display = 'block';

    }
}

任何人都可以建議取消選中復選框時如何隱藏字段嗎？

Answer 1

您應該考慮使用jQuery

$("#hiddenDiv").hide();
$("#hiddenDiv").show();

還有更好的東西

$("#hiddenDiv").fadeOut();
$("#hiddenDiv").fadeIn();

Answer 2

我認為使用jQuery切換更適合您的問題：

<input type="checkbox" id="cb_post">
<div id = "hiddenDiv">
<li>Toggle me</li>
</div>

$("#cb_post").on('click', function(){

    $("#hiddenDiv").toggle();

});

也許使用事件onchange而不是onclick會更優雅。

https://jsfiddle.net/qqL0sxxs/

Answer 3

這是工作代碼：

 var chebx = document.getElementsByClassName('toggleField'); for (var i = 0; i < chebx.length; i++) { chebx[i].addEventListener('click', toggleField, false); } function toggleField() { var field = document.getElementById(this.dataset.target); if (field) { switch (this.checked) { case true: if (field.classList.contains('hide')) { field.classList.remove('hide'); } else { field.classList.add('hide'); } break; default: break; } } } 

 .hide { display: none; } 

 <lable for='toggleField'>Toggle Field</lable> <input type="checkbox" data-target='field1' class='toggleField'> <input type='text' class='hide' id='field1' /> <hr> <lable for='toggleField'>Toggle Field</lable> <input type="checkbox" data-target='field2' class='toggleField'> <input type='text' class='hide' id='field2' />