Question

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

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

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

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

感谢。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

例如：

＆＃13;

var checkbox = document.querySelector('[name="your_name"]'),
    text = document.querySelector('.text');

checkbox.addEventListener('click', function (e) {
  text.style.display = e.target.checked ? 'block' : 'none';
});

＆＃13;

<input name="your_name" value="your_value1" type="checkbox">

<p class="text" style="display: none">Block 1</p>

＆＃13;

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

1 个答案: