在选中/未选中复选框上显示/隐藏表单字段答案

【问题标题】：Show/Hide Form Fields on checkbox checked/unchecked在选中/未选中复选框上显示/隐藏表单字段
【发布时间】：2016-04-28 15:22:41
【问题描述】：

我正在使用 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';

    }
}

任何人都可以建议在取消选中复选框时如何隐藏字段吗？

【问题讨论】：

标签： javascript forms

【解决方案1】：

你应该考虑使用jQuery

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

还有更好的东西

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案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' />

【讨论】：