0

フォームがあります。配送先住所を非表示にする必要があります。チェックボックス (請求先住所と同じ配送先住所) をオフにすると、配送先住所フィールドが表示されます。チェックボックスがオフになっていない限り、請求先住所も配送先住所と同じように入力する必要があります。

手短に言うと、請求先住所を 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>
4

3 に答える 3

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

簡単にするために、必要な div に id を追加しました。

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

jsfiddle http://jsfiddle.net/P7RhF/4/の作業コードを参照してください。

于 2013-04-28T11:29:36.403 に答える