基于 HTML 5 复选框输入显示项目答案

【问题标题】：Displaying Items Based On HTML 5 Checkbox Input基于 HTML 5 复选框输入显示项目
【发布时间】：2015-12-24 03:34:42
【问题描述】：

如果我有两个这样的 HTML 5 复选框...

<input name="your_name" value="your_value1" type="checkbox">

<input name="your_name2" value="your_value2" type="checkbox">

如何根据用户的输入显示文本区域（或任何其他 HTML 5 项目）？例如，如果他们选择 value1 显示一个文本块，如果他们选择 value2 则显示另一个文本块。无需重新加载页面或提交表单的最佳方法是什么？

谢谢。

【问题讨论】：

标签： javascript html

【解决方案1】：

如果元素是兄弟元素，最简单的方法是使用:checked 伪类来确定复选框是否被选中。然后，您可以使用通用兄弟选择器~，根据选中状态选择以下兄弟元素：

[name="your_name"]:checked ~ .block1 {
  display: block;
}
[name="your_name2"]:checked ~ .block2 {
  display: block;
}
p {
  display: none;
}

<input name="your_name" value="your_value1" type="checkbox">
<input name="your_name2" value="your_value2" type="checkbox">

<p class="block1">Block 1</p>
<p class="block2">Block 2</p>

如果您想使用 JavaScript 路由，则需要将 change 事件侦听器附加到复选框元素。

例如：

var checkbox = document.querySelector('[name="your_name"]'),
    text = document.querySelector('.text');

checkbox.addEventListener('click', function (e) {
  text.style.display = e.target.checked ? 'block' : 'none';
});

<input name="your_name" value="your_value1" type="checkbox">

<p class="text" style="display: none">Block 1</p>

【讨论】：

非常感谢，这是一个了不起的例子！