单选按钮隐藏和显示形式内容

我愿在此基础上建立国家登记表。默认地址格式为默认输入可见当客户点击的非英国单选按钮，然后自动隐藏英国的形式和oppen非英国地址形式单选按钮隐藏和显示形式内容

我想我需要使用JavaScript或JQuery的实现此功能。

任何人都可以给我这个功能的建议。如果您认为我的问题不可接受，请不要降低我的费率。如果你不喜欢，我可以删除我的问题。

这里是我的表单代码

<form action="sent.php" name="form1" method="post"> 
 
    Name 
 
    <input type="text" name="name" /> 
 
    <br />UK 
 
    <input type="radio" name="from" value="UK"> 
 
    <br />Address Line 1 
 
    <input type="text" name="ad1" /> 
 
    <br />Address Line 2 
 
    <input type="text" name="ad2" /> 
 
    <br />Town 
 
    <input type="text" name="town" /> 
 
    <br />Post Code 
 
    <input type="text" name="post_code" /> 
 
    <br />EU 
 
    <input type="radio" name="from" value="UK"> 
 
    <br />Address Line 1 
 
    <input type="text" name="ad1" /> 
 
    <br />Address Line 2 
 
    <input type="text" name="ad2" /> 
 
    <br />Town 
 
    <input type="text" name="town" /> 
 
    <br />Post Code 
 
    <input type="text" name="post_code" /> 
 
    <br />Country 
 
    <input type="text" name="post_code" /> 
 
    <br /> 
 
</form>

来源

2011-11-01 Muhammed

我的广告老虎机将开始您的JavaScript或jQuery功能，并回到StackOverflow当你有一个具体的问题。 –

你可以用除了在两个不同的div的单选按钮的所有输入元素，因此你可以捕捉的单选按钮和显示更改事件相应地隐藏两个div。

来源

2011-11-01 15:15:43

我觉得DIV应该会更好感谢您的建议 – Muhammed

我不认为你需要显示或隐藏一定的元素作为表单元素似乎是两个“形式”一样，认为：

<form action="sent.php" name="form1" method="post"> 

Name <input type="text" name="name" /><br/> 
UK <input type="radio" name="from" value="UK" >/EU <input type="radio" name="from" value="EU" ><br /> 

Address Line 1 <input type="text" name="ad1" /> <br /> 
Address Line 2 <input type="text" name="ad2" /> <br /> 
Town <input type="text" name="town" /> <br /> 
Post Code <input type="text" name="post_code" /> <br /> 

</form>

然后当你的“从要求“参数，你会知道他们来自哪个国家？

来源

2011-11-01 15:17:13

窗体很安静很大这里只是显示了表格的一部分 – Muhammed

好的，下次可能会更具体一些，就像你添加了一个闭合窗体标签:) –

您可以添加一个类来表示哪些元素是在英国的住址元素，哪些是欧盟或作为ELODIE佩蒂特，回答他们包裹在一个div，然后显示或隐藏取决于选中了哪个radion按钮。
这里是一个JSFiddle使用后一选项。

来源

2011-11-01 15:24:36

我发现它简单的解决方案使用jQuery

与jQuery支持

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

下面是javascript代码

$(document).ready(function() { 
    $("input[name$='from']").click(function() { 
     var test = $(this).val(); 
     $("div.desc").hide(); 
     $("#c" + test).show(); 
    }); 
}); 
</script>

这里与格化脓的HTML代码

<form action="sent.php" name="form1" method="post"> 
<label>UK <input type="radio" name="from" value="1" ></label><br /> 
<label>EU <input type="radio" name="from" value="2" ></label><br /> 
<div id="c1" class="desc"> 
Name <input type="text" name="name" /> <br /> 
Address Line 1 <input type="text" name="ad1" /> <br /> 
Address Line 2 <input type="text" name="ad2" /> <br /> 
Town <input type="text" name="town" /> <br /> 
Post Code <input type="text" name="post_code" /> <br /> 
</div> 
<div id="c2" class="desc" style="display:none;"> 
Address Line 1 <input type="text" name="ad1" /> <br /> 
Address Line 2 <input type="text" name="ad2" /> <br /> 
Town <input type="text" name="town" /> <br /> 
Post Code <input type="text" name="post_code" /> <br /> 
Country <input type="text" name="post_code" /> <br /> 
</div> 
</form>

来源

2011-11-02 10:09:39 Muhammed

单选按钮隐藏和显示形式内容

回答

相关问题