根据HTML 5复选框输入显示项目

Question

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

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

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

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

谢谢。

Answer 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事件侦听器附加到checkbox元素。

例如：

 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>