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' />

选中/取消选中复选框上的显示/隐藏表单字段

3 个答案: