1

以下内容非常适合我的需求。采取了复选框的状态，为我做了很棒的事情；根据选中或未选中的复选框，使 3 个不同的表单元素可见（相对于显示/隐藏）。很简单，我猜。再说一次，我将“简单”基于代码看起来的对称程度以及它是否少于 10 行。除此之外，我迷路了。但是，我已经正式放弃搞乱 IE 的复选框边框问题和 X 浏览器对齐 yippeedoodles。我想要像素完美的硬方式。但我输掉了那场战斗。但是，我不需要对此进行任何讨论，而是需要使用表单选择框来完成与复选框相同的事情（如下）：

<form id="form">
<input id="checkbox" name="checkbox" type="checkbox" onclick="showhideid" />
</form>



#IdOne, #IdTwo, #IdThree (visibility:hidden;}


function showhideid()
{
    if (document.form.checkbox.checked)
    {   
        document.getElementById("IdOne").style.visibility = "visible";
        document.getElementById("IdTwo").style.visibility = "visible";
        document.getElementById("IdThree").style.visibility = "visible";
        document.getElementById("IdFour").setAttribute("class", "required");

    }
    else
    {
        document.getElementById("IdOne").style.visibility = "hidden";
        document.getElementById("IdTwo").style.visibility = "hidden";
        document.getElementById("IdThree").style.visibility = "hidden";   
        document.getElementById("IdFour").setAttribute("class", "");
    }
}

现在，如果我可以使用选择框（下图）完成同样的事情，我将成为一个快乐的人。

这是我所得到的。阅读 Jquery/CSS 手册页让我头晕目眩，我无法将它们全部放在一起。

<html>

<form id="form">

<select name="SelectBox">
<option>Make a Choice</option>
<option value="Value1">Selection1</option>
<option value="Value2">Selection2</option>
<option value="Value3">Selection3</option>
</select>

<label id="IdOne" for="input1">MeAndMyInputAreInvisibleByDesign</label>
<input id="IdTwo" name="input1" type="text">

<span id="IdThree">Im Not In display:none Mode I'm In visibility:hidden Mode. Big difference."
</span>

<input id="IdFour" name="input2" type="text" class="I have none, but I will soon. I hope" />

</form>

</html>
4

2 回答 2

3

看一下select标签：

<select name="SelectBox">
<option>Make a Choice</option>
<option value="IdTwo">Selection1</option> <!-- the value should be the id of the input field -->
<option value="IdThree">Selection2</option>
<option value="IdFour">Selection3</option>
</select>

现在您必须为要显示/隐藏的每个元素提供一个选择器类：

<input id="IdTwo" name="input1" type="text" class="toggle">
<span id="IdThree" class="toggle">
   Im Not In display:none Mode I'm In visibility:hidden Mode. Big difference."
</span>
<input id="IdFour" name="input2" type="text" class="toggle" />

现在看一下javascript：

jQuery(document).ready(function(){
 jQuery('input[name="SelectBox"]').change(function(){
  jQuery('.toggle').css({"visibility":"hidden"});//Hide all
  jQuery("#" + jQuery(this).val()).css({"visibility":"visible"});
 });
});
于 2011-04-17T11:06:57.323 回答
1

你可以这样做：

<html>

<form id="form">
<input type="text" id="IdOne" class="toggle" />
<input type="text" id="IdTwo" class="toggle" />
<input type="text" id="IdThree" class="toggle" />
<select name="SelectBox" id="selectBox">
<option value="0">Make a Choice</option>
<option value="IdOne">First element</option>
<option value="IdTwo">Second element</option>
<option value="IdThree">Third element</option>
</select>

</html>

这在javascript中：

jQuery(document).ready(function(){
 jQuery("#selectBox").change(function(){
  jQuery(".toggle").hide();
  jQuery("#" + jQuery(this).val()).show();
 });
});
于 2011-04-17T07:31:08.517 回答