HTML表单-需要帮助有新的输入区域填充,如果单选按钮被点击


html form-- need help having new input area populate if radio button is clicked

我正在与mysql和php建立一个基本的新客户数据库。我希望当人们点击"不同的邮寄地址"单选按钮时,另一对输入字段出现在邮寄地址中。我不太确定如何处理这个输入,而不是变量。是否有一种方法来做一个if语句这里是我的html表单代码下面

    <form method="POST" action="insert.php">
    <fieldset>
    <legend>New Customer data</legend>
    <label>Complete Below</label>
<div class="controls controls-row">
  <input class="span4" name="firstname" type="text" placeholder="First name">
  <input class="span3" name="lastname" type="text" placeholder="Last Name">
   <input class="span3" name="phone" type="text" placeholder="Phone">
</div>
<div class="controls controls-row">
  <input class="span4" name="address" type="text" placeholder="Address">
  <input class="span2" name="city" type="text" placeholder="City">
  <input class="span1" name="state" type="text" placeholder="State">
</div>
<div class="controls controls-row">
  <input class="span4" name="zip" type="text" placeholder="Zip Code">
  <input class="span2" name="email" type="text" placeholder="Email">
  <input class="span2" name="ccemail" type="text" placeholder="cc email">
</div>


    <span class="help-block">When is the customers due date monthly</span>
      <label class="radio">
  <input type="radio" name="duedate" id="optionsRadios1" value="1" checked>
 1st of the month</label>
<label class="radio">
  <input type="radio" name="duedate" id="optionsRadios2" value="15">
 15th of the month
 </label>    
  <span class="help-block">Mailing address</span>
 <label class="radio">
  <input type="radio" name="mailingaddress" id="optionsRadios3" value="1" checked>
Check if mailing address is the same as the service address
</label>
<label class="radio">
  <input type="radio" name="mailingaddress" id="optionsRadios4" value="0">
 Check if mailing address is different
 </label>
                     <button type="submit" class="btn btn-primary">Submit</button>

  </fieldset>
</form>

使用jQuery,有两个最初隐藏的输入。用户选中复选框后,对这两个输入执行'$.show()'。我有一个div包含两个输入,只是显示或隐藏div取决于框是否被选中

你可以试试这个

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" >
</script>
<script>
   $(document).ready(function(){
 $("#checkme").on('change',function(){
    if($("#checkme").is(":checked")){
        $("input#myemail").fadeIn();
    }else{
        $("input#myemail").fadeOut();
    }
 });
   });
</script>
</head>
<body>
show: <input type="checkbox" id="checkme" /><br />
<input type="text" id="myemail" hidden />
</body>
</html>