Question

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

如此简短地说，将帐单地址复制到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>

送货地址与Billing相同

2 个答案: