Forms 发货地址与账单相同

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

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

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

名字*


递送地址

和航运一样


沃纳姆

还有剧本：

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

函数设置（已选中）{
如果（选中）{
document.getElementById（'firstname'）。value=document.getElementById（'deliver_firstname'）。value；
}否则{
document.getElementById（'firstname'）。值=''；
}
}

您需要将shipping\u address div的显示样式更改为block以使其可见

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

查看JSFIDLE上的工作代码

您可以试试这个（如果您可以更改您的btn类型submit to按钮）

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>

名字*


递送地址
孟加拉国

帐单地址



和航运一样


沃纳姆

Hey Thank allot，快到了，当我填写账单地址字段时，它也需要填写发货地址。因此，当我提交表单时，shippingfields是相同的（选中时）。取消选中复选框时，字段需要为空，以便访问者可以添加不同的配送地址。抱歉，不清楚。如果您不介意使用jQuery，您可以使用此代码镜像输入字段$（'.#firstname'）.bind（'keypress blur'，function（）{$（'.#deliver_firstname'）.val（$（this.val（））；}）；请参阅这里的工作示例：当我测试您的JSFIDLE时，输入我的名字，然后取消选中，它不是空的。当我取消选中字段为空时，它需要复制名称。我无法将其更改为button，表单将不会做任何事情：（我已经更改了小提琴，但它还没有工作，它只需要将相同的内容填充到shippingfields，但当我取消选中字段时，它需要为空。我不是编码员。

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

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