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"元素，在选中“否”时隐藏，默认情况下隐藏。

问题是现在表单的状态是从数据库加载的，并且可以在加载时检查“是”（在所述情况下html将是<input type="radio" name="X" value="Yes" onchange="show(this, true)" checked>），所以我需要某种onload（也许通过jQuery）函数将检查是否检查是，如果是，将显示隐藏的元素。因为我的网页设计技巧非常低，所以我对如何继续下去感到很茫然。

我完全清楚我的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"添加到收音机的是输入。

Answer 1

只有使用复选框，才能使用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 2

使用此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>

尝试小提琴here

Answer 3

您可以为<fieldset>的每个人提供相同的类名，然后循环遍历具有此类名的所有元素。一旦页面加载并在每个复选框事件上执行此循环。

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

3 个答案: