我可以切换复选框的显示/隐藏,因为它可以取消选中但无线电组的行为不同,因为单击选中的单选按钮不会取消选中它,只需单击同一组中的另一个单选按钮 .
DEMO WORKS FOR CHECKBOX NOT RADIO GROUPS
如何修改它以便它适用于同一功能中的单选按钮和复选框?在这个例子中,我可以单击Item4但是在单击无线电组中的其他内容时它不会隐藏 .
它应该如何工作:将data-info-id =“infox”放在容器上的输入Put id =“infox”通常是一个div
欢迎使用jQuery解决方案 .
HTML
<input type="checkbox" id="item1" data-info-id="info1" />
<label for="item1">Item 1 Checkbox</label>
<div id="info1">Content checkbox group</div>
</p>
<input type="radio" id="jb1" name="jb" />
<label for="jb1">Item2 Radio</label>
<input type="radio" id="jb2" name="jb" />
<label for="jb2">Item3 Radio</label>
<input type="radio" id="jb3" name="jb" data-info-id="info2" />
<label for="jb3">Item4 Radio</label>
<div id="info2">Content radio group</div>
CSS
[id^="info"] {
display: none;
}
JS
document.addEventListener('change', function(e) {
var id = e.target.getAttribute('data-info-id');
var checked = e.target.checked;
if (id) {
var div = document.getElementById(id);
if (div)
div.style.display = checked ? 'block' : 'none';
}
});
2 回答
我首先在复选框和单选按钮周围添加了两个包含div:
然后我添加了一个for循环来遍历所点击项目的父项的子项 . 因为它只触发所点击项目的更改事件 .
这对我有用 . 它有点下降和脏,但它的工作正常 .
对于单选按钮 . 这可以通过两种方式完成:这是jsFiddle:http://jsfiddle.net/zvzL8u1n/
Method1 有2个单选按钮显示和隐藏 .
jbM1
是两个单选按钮的名称 .因此基本上
data-info-id
在两个单选按钮中给出,并且在他们更改时,div被切换 .Method2 只有一个单选按钮,使其像复选框一样工作
jb3
是单选按钮的id,data-prev
用于存储prev值 .