Javascript 选中输入时隐藏/显示表单元素

我目前有一个html表单（由php生成），具有以下结构的多个实例：

功能显示（元素，显示）{
变量元素=
elem.parentNode.parentNode.parentNode.getElementsByClassName（“隐藏”）；
var i；
对于（i=0；i，只有在使用复选框的情况下，才可以使用CSS执行此操作。

使用
：选中的
选择器显示内容

// You css 
input[type=checkbox] + label {
    color: #ccc;
    font-style: italic;
} 

// Set the content to be displayed when the radio/checkbox is checked.
// using the css3 selector :checked
input[type=checkbox]:checked + label {
    color: #f00;
    font-style: normal;
} 


CSS太棒了
您可以为所有
成员指定相同的类名，然后循环使用该类名的所有元素。该循环将在页面加载后在每个复选框事件上执行。
使用此javascript片段


功能显示（元素，显示）{
变量元素=
elem.parentNode.parentNode.parentNode.getElementsByClassName（“隐藏”）；
var i；
对于（i=0；该表单相当长，因此每次更新任何一个表单时都必须重新检查每个收音机，我认为这有点过分。除非我没有正确理解您的答案。您是对的。@CodeWizard的答案更简单、更有效。这是一个好主意，但该表单中有多个相同结构的实例，并且为它们中的每一个都指定一个不同的id是过分的；有没有一种方法可以通过每次“显示”都进行循环检查来实现同样的效果类，然后执行相同的操作？是的，这可以通过使用类名而不是id来处理。您需要按类名获取单选按钮，并使用相同的逻辑。由于我不熟悉js，我花了一些时间，但您的建议很有魅力。谢谢。
<input type="checkbox" id="ossm" name="ossm"> 
<label for="ossm">CSS is Awesome</label>