根据表单选择框选择显示（可见/隐藏而不是显示/隐藏）HTML 元素

发布于 2024-11-02 01:14:54 字数 1907 浏览 1 评论 0原文

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

<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>

原文

The following worked perfectly for my needs. Took the state of a checkbox and did wonderful things for me; Made 3 different form elements visible (vs. show/hide) based on checkbox checked or not checked. Simple, I guess. Then again, I base "simple" on how symmetrical the code looks and if it's less that 10 lines. Other than that, I'm lost. However, I've officially given up on messing around with IE's checkbox border issue and X-browser alignment yippeedoodles. I want pixel perfect the hard way. But I lost that battle. But rather than get into any discussion about that, I need to accomplish the same thing using a form select box as I was able to do with the checkboxes (below):

<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", "");
    }
}

Now, if I can accomplish the same thing using a select box (below), I will die a happy man.

This is as far as I've gotten. I'm super dizzy from reading Jquery/CSS man pages and I just can't put it all together.

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梨涡少年 2024-11-09 01:14:54

看一下 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"});
 });
});

take a look at the select tag:

<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>

Now you must give a selector class to each element you want to show/hide:

<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" />

Now look at the 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"});
 });
});

回复收藏 0 原文

黑寡妇 2024-11-09 01:14:54

你可以

<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();
 });
});

You can do something like this:

<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>

this in javascript:

jQuery(document).ready(function(){
 jQuery("#selectBox").change(function(){
  jQuery(".toggle").hide();
  jQuery("#" + jQuery(this).val()).show();
 });
});

回复收藏 0 原文

~没有更多了~