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

Question

我目前有一个 html 表单(由 php 生成)，其中包含以下结构的多个实例:

function show(elem, show){
    var elements = 
    elem.parentNode.parentNode.parentNode.getElementsByClassName("hidden");
    var i;
    for(i=0; i<elements.length; i++){
	    if(show){
		    elements[i].style.display = "initial";
	    }
	    else{
		    elements[i].style.display = "none";
	    }
    }
}

.hidden {
    display: none;
    width: 100%;
    padding: 0px;
    margin: 2px;
    overflow: hidden;
}

<fieldset>
    <legend>Something</legend>

    <ul>
	    <li>
	        <input type="radio" name="X" value="No" onchange="show(this, false)">
	        <label>No</label>
	    </li>
	    <li>
	        <input type="radio" name="X" value="Yes" onchange="show(this, true)">
	        <label>Yes</label>
	    </li>
    </ul>
	
	<p class="hidden">
	    Elements
    </p>

    <fieldset class="hidden">
	    Elements
    </fieldset>

</fieldset>

目标是获得 class="hidden"元素在勾选是时显示，勾选否时隐藏，默认隐藏。

问题是现在表单的状态是从数据库加载的，并且可以在加载时检查"is"(在这种情况下，html 将是 <input type="radio" name="X" value="Yes" onchange="show(this, true)" checked> )，所以我需要某种加载(可能通过jQuery) 函数将检查是否选中 Yes，如果选中，将显示隐藏的元素。而且我对如何进行几乎一无所知，因为我的网页设计技能很低。

我非常清楚我的 js 和整体设计非常困惑，因此非常感谢任何关于如何改进它的建议。

编辑

感谢 Joey Pinto 的建议，下面是最终完成的方式(添加以下 js):

$(document).ready( function(){
    var show=document.getElementsByClassName("shower");
    for(i=0;i<show.length;i++){
        if(show[i].checked){
            mostrar(show[i],true);
        }
    }
}
);

当然还有添加 class="shower" radio 的 yes 输入。

Answer 1

使用这个 javascript 片段

function show(elem, show){
    var elements = 
    elem.parentNode.parentNode.parentNode.getElementsByClassName("hidden");
    var i;
    for(i=0; i<elements.length; i++){
	    if(show){
		    elements[i].style.display = "initial";
	    }
	    else{
		    elements[i].style.display = "none";
	    }
    }
}

var yes_radio_button=document.getElementById("yes_radio");
if(yes_radio_button.checked){
	show(yes_radio_button,true);
}
else{
show(yes_radio_button,false);
}

.hidden {
    display: none;
    width: 100%;
    padding: 0px;
    margin: 2px;
    overflow: hidden;
}

<fieldset>
    <legend>Something</legend>

    <ul>
	    <li>
	        <input type="radio" name="X" value="No" id="no_radio" onchange="show(this, true)" checked>
	        <label>No</label>
	    </li>
	    <li>
	        <input type="radio" name="X" value="Yes" id="yes_radio" onchange="show(this, true)" >
	        <label>Yes</label>
	    </li>
    </ul>
	
	<p class="hidden">
	    Elements
    </p>

    <fieldset class="hidden">
	    Elements
    </fieldset>

</fieldset>

试试 fiddle here