隐藏/显示当输入检查

Question

我现在有一个HTML表单（由PHP生成）具有以下结构的多个实例的形式的元素：

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

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

<fieldset> 
 
    <legend>Something</legend> 
 

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

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

 
</fieldset>

的目标是具有class="hidden"元素显示何时选中“是”，显示“否”时隐藏，默认情况下隐藏。

问题是，现在窗体的状态是从数据库加载的，并且可以在加载时检查“是”（在这种情况下，html将是<input type="radio" name="X" value="Yes" onchange="show(this, true)" checked>），所以我需要某种onload（也许通过jQuery ）函数将检查是否被选中，如果是，将显示隐藏的元素。由于我的网页设计技能相当低，所以我几乎不知如何继续。

我完全知道我的js和整体设计相当混乱，所以如何改进它的任何建议将非常感激。

编辑

由于乔伊·平托的建议，这里是如何它已经最终完成（加入以下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"收音机的是输入的和。

Answer 1

使用该JavaScript片段

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

 
var yes_radio_button=document.getElementById("yes_radio"); 
 
if(yes_radio_button.checked){ 
 
\t 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> 
 
\t  <li> 
 
\t   <input type="radio" name="X" value="No" id="no_radio" onchange="show(this, true)" checked> 
 
\t   <label>No</label> 
 
\t  </li> 
 
\t  <li> 
 
\t   <input type="radio" name="X" value="Yes" id="yes_radio" onchange="show(this, true)" > 
 
\t   <label>Yes</label> 
 
\t  </li> 
 
    </ul> 
 
\t 
 
\t <p class="hidden"> 
 
\t  Elements 
 
    </p> 
 

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

 
</fieldset>

尝试小提琴here

Answer 2

只有当您使用复选框时，才可以使用CSS来完成此操作。
使用:checked选择器显示内容。

// 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; 
} 

<input type="checkbox" id="ossm" name="ossm"> 
<label for="ossm">CSS is Awesome</label> 

Answer 3

你可以给相同的类名到您<fieldset>然后循环在具有此类名称的所有元素的每一个人。这个循环会在加载页面和每个复选框事件后执行。