收货地址与账单地址相同

Question

我有一个表格，需要隐藏送货地址，当您取消选中复选框（与帐单地址相同的送货地址）时，送货地址字段将可见。此外，除非未选中复选框，否则帐单地址需要与送货地址填写相同。

简而言之，将帐单地址复制到 shippingaddress 和 shippingaddress 不可见，未选中时，shippingaddress 可见且字段为空。

我从这里开始； 希望有人能帮帮我！

http://jsfiddle.net/fourroses666/P7RhF/3/

<form>

    <p class="form-row form-row-first">
      <label>Firstname <abbr class="required" title="verplicht">*</abbr></label><br />
      <input type="text" placeholder="Firstname" name="firstname:required" id="firstname" />
    </p>

    <h2>Deliver address</h2>

    <p id="shiptobilling" class="form-row">
      Same as Shipping <input type="checkbox" onclick="SetBilling(this.checked);" /> 
    </p>

    <div class="shipping_address" style="display:none;">
        <p class="form-row form-row-first">
          <label>Voornaam <abbr class="required" title="verplicht"></abbr></label><br />
          <input type="text" placeholder="Firstname" name="deliver_firstname" id="deliver_firstname" />
        </p>
    </div>

    <input class="btn" type="submit" value="Checkout" name="checkout" />

</form>

还有脚本：

<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
function SetBilling(checked) {
    if (checked) {
        document.getElementById('firstname').value = document.getElementById('deliver_firstname').value; 
    } else {
        document.getElementById('firstname').value = ''; 
    }
}
</script>

Answer 1

您需要更改 shipping_address div 的显示样式以使其可见。

function SetBilling(checked) {
    if (checked) {
        document.getElementById('deliveryaddres').style.display="none";
        document.getElementById('deliver_firstname').value = ''; 
    }
    else {
        document.getElementById('deliveryaddres').style.display="block";
        document.getElementById('deliver_firstname').value = document.getElementById('firstname').value; 
    }
}

为方便起见，我将 id 添加到所需的 div 中：

<div id="deliveryaddres" class="shipping_address" style="display:none;">

查看 jsfiddle http://jsfiddle.net/P7RhF/4/ 上的工作代码

Answer 2

你可以试试这个（如果你可以改变你的btn类型提交到按钮）

$("#chkSameAsBilling").live("click", function () {
        var isBillingShown = $("#chkSameAsBilling").is(":checked");
        if (isBillingShown) {
            $("#txtBillingAddress").val($("#lblShippingAddress").text());
            $("#txtBillingAddress").add().attr("style", "display: none;");

        }
        else {
            $("#txtBillingAddress").show();

        }
    });
    function SetBilling(checked) {
        if (checked) {
            document.getElementById('firstname').value = document.getElementById('deliver_firstname').value;
        } else {
            document.getElementById('firstname').value = '';
        }
    }
    $(".btn").live("click", function () {
        alert($("#txtBillingAddress").val());
    });

html:

<form>

    <p class="form-row form-row-first">
      <label>Firstname <abbr class="required" title="verplicht">*</abbr></label><br />
      <input type="text" placeholder="Firstname" name="firstname:required" id="firstname" />
    </p>

    <h2>Deliver address</h2>

        <label id="lblShippingAddress" style="display:none;">Bangladesh</label><br/>
    <label for="billingAddress">Billing Address</label>
    <input type="text" id="txtBillingAddress"/><br/>

    <p id="shiptobilling" class="form-row">

      Same as Shipping <input type="checkbox" id="chkSameAsBilling" onclick="SetBilling(this.checked);"/> 
    </p>

    <div class="shipping_address" style="display:none;">
        <p class="form-row form-row-first">
          <label>Voornaam <abbr class="required" title="verplicht"></abbr></label><br />
          <input type="text" placeholder="Firstname" name="deliver_firstname" id="deliver_firstname" />
        </p>
    </div>

    <input class="btn" type="button" value="Checkout" name="checkout" />

</form>

Answer 3

function myFunction() {
    var checkBox = document.getElementById("myCheck");  
    var textShip = document.getElementById("ShippingAd");
    var areaShip = document.getElementById("AreaAd");
    var textBil = document.getElementById("BillingAd");
    var area2Bil = document.getElementById("Area2Ad");
    if (checkBox.checked == true){
          textBil.value=textShip.value; 
          area2Bil.value=areaShip.value;
    } else {
          textBil.value="";
          area2Bil.value="";
    }
  }

<!--shipping add same as billing add-->
<!DOCTYPE html>
<html>
<body>
  <p>shipping Address</p>
    <textarea id="ShippingAd"></textarea>  
  <p>Area</p>
    <textarea id="AreaAd"></textarea>  
    <br/>
  
    <input type="checkbox" id="myCheck" onclick="myFunction()">
    <label for="myCheck">Same as shipping Address:</label>
  
    <p>billing Address</p>
    <textarea id="BillingAd"></textarea><br/>   
  
    <p>Area</p>
    <textarea id="Area2Ad"></textarea>  
</body>
</html>