当单击复选框时，Jquery复制所有文本字段并下拉发送到计费的值。

Question

我已经有了一些代码，它可以正确工作90%。我就是不能让它带着掉下来的值。

本质上，当单击复选框时，我只需要它将所有列出的账单字段转到发货。所有的文本内容都正常工作，但下降没有任何作用。我.这只是我的疏忽。

下面是：

 //copy billing information over to shipping information fields
 $(function(){
     $("#shipping_same_as_billing").change(function() {
         if ($("#shipping_same_as_billing:checked").length > 0) {
             bindGroups();
         } else {
             unbindGroups();
         }
     });
 });

 var bindGroups = function() {
     // First copy values
     $("input[name='shipping_name']").val($("input[name='billing_name']").val());
     $("input[name='shipping_address1']").val($("input[name='billing_address1']").val());
     $("input[name='shipping_address2']").val($("input[name='billing_address2']").val());
     $("input[name='shipping_city']").val($("input[name='billing_city']").val());
     $("input[name='shipping_postcode']").val($("input[name='billing_postcode']").val());
     $("input[name='shipping_state']").val($("input[name='billing_state']").val());
     $("input[name='shipping_country']").val($("input[name='billing_country']").val());
     $("input[name='shipping_phone']").val($("input[name='billing_phone']").val());            

     // Then bind fields
     $("input[name='billing_name']").keyup(function() {
         $("input[name='shipping_name']").val($(this).val());
     });
     $("input[name='billing_address1']").keyup(function() {
         $("input[name='shipping_address']").val($(this).val());
     });
     $("input[name='billing_address2']").keyup(function() {
         $("input[name='shipping_address2']").val($(this).val());
     });
     $("input[name='billing_city']").keyup(function() {
         $("input[name='shipping_city']").val($(this).val());
     });
     $("input[name='billing_postcode']").keyup(function() {
         $("input[name='shipping_postcode']").val($(this).val());
     });
     $("input[name='billing_state']").keyup(function() {
         $("input[name='shipping_state']").val($(this).val());
     });
     $("input[name='billing_country']").keyup(function() {
         $("input[name='shipping_country']").val($(this).val());
     });
     $("input[name='billing_phone']").keyup(function() {
         $("input[name='shipping_phone']").val($(this).val());
     });            
 };

 var unbindGroups = function() {
     $("input[name='billing_name']").unbind("keyup");
     $("input[name='billing_address1']").unbind("keyup");
     $("input[name='billing_address2']").unbind("keyup");
     $("input[name='billing_city']").unbind("keyup");
     $("input[name='billing_postcode']").unbind("keyup");
     $("input[name='billing_state']").unbind("keyup");
     $("input[name='billing_country']").unbind("keyup");
     $("input[name='billing_phone']").unbind("keyup");
 };          

​

按照要求，这里是完整的HTML代码。请注意，这里有一些CMS\Code点火器特定的代码。

<div class="w-row">
  <div class="w-col w-col-6 checkoutcolumn1">
    <div class="forminfotextblock">
      <p class="forminfotext">Contact Details</p>
    </div>
    <div class="formblock">
      <div class="w-form">
          <div class="w-clearfix">
            {error:billing_name}<label class="checkoutlabel" for="name">Name:</label>
            <input class="w-input checkoutfield" id="billing_name" type="text" name="billing_name" value="{billing_name}">                   
          </div>
          <div class="w-clearfix">
            {error:billing_address1}<label class="checkoutlabel" for="name-3">Address:</label>
            <input class="w-input checkoutfield" id="billing_address1" type="text" name="billing_address1" value="{billing_address1}">
          </div>
          <div class="w-clearfix">
            <label class="checkoutlabel" for="name-4">Address 2:</label>
            <input class="w-input checkoutfield" id="billing_address2" type="text" name="billing_address2" value="{billing_address2}">
          </div>
          <div class="w-clearfix">
            {error:billing_city}<label class="checkoutlabel" for="name-5">City:</label>
            <input class="w-input checkoutfield" id="billing_city" type="text" name="billing_city" value="{billing_city}">
          </div>
          <div class="w-clearfix">
            <label class="checkoutlabel" for="name-6">Postcode:</label>
            <input class="w-input checkoutfield" id="billing_postcode" type="text" name="billing_postcode" value="{billing_postcode}">
          </div>
          <div class="w-clearfix">
            <label class="checkoutlabel" for="billing_state">State:</label>
            <select class="w-select checkoutfield" id="billing_state" name="billing_state" value="{billing_state}">
              {billing_state_options}
            </select>
          </div>
          <div class="w-clearfix">
           {error:billing_country}<label class="checkoutlabel" for="billing_country">Country:</label>
            <select class="w-select checkoutfield" id="billing_country" name="billing_country" value="{billing_country}">
              {billing_country_options}
            </select>
          </div>
          <div class="w-clearfix">
            {error:order_email}<label class="checkoutlabel" for="name-9">Email:</label>
            <input class="w-input checkoutfield" id="order_email" type="text" name="order_email" value="{order_email}">
          </div>
          <div class="w-clearfix">
            <label class="checkoutlabel" for="name-10">Phone:</label>
            <input class="w-input checkoutfield" id="billing_phone" type="text" name="billing_phone" value="{billing_phone}">
          </div>
          <div class="w-clearfix">
            <label class="checkoutlabel" for="name-11">Instructions:</label>
            <input class="w-input checkoutfield" id="order_custom1" type="text" name="order_custom1" value="{order_custom1}">
          </div>
          <div class="w-checkbox">
            <input type="hidden" name="shipping_same_as_billing" value="0" />
            <input class="w-checkbox-input" id="shipping_same_as_billing" type="checkbox" name="shipping_same_as_billing" value="1" {shipping_same_as_billing_checked}>
            <label class="w-form-label" for="shipping_same_as_billing">Same details for shipping</label>               
          </div>
      </div>
    </div>
  </div>
  <div class="w-col w-col-6 checkoutcolumn2">
    <div class="forminfotextblock">
      <p class="forminfotext">Shipping Address</p>
    </div>
    <div class="formblock">
      <div class="w-form">
          <div class="w-clearfix">
            {error:shipping_name}<label class="checkoutlabel" for="name-14">Name:</label>
            <input class="w-input checkoutfield" id="shipping_name" type="text" name="shipping_name" value="{shipping_name}">
          </div>
          <div class="w-clearfix">
            {error:shipping_address1}<label class="checkoutlabel" for="name-15">Address:</label>
            <input class="w-input checkoutfield" id="shipping_address1" type="text" name="shipping_address1" value="{shipping_address1}">
          </div>
          <div class="w-clearfix">
            <label class="checkoutlabel" for="name-16">Address 2:</label>
            <input class="w-input checkoutfield" id="shipping_addres2" type="text" name="shipping_address2" value="{shipping_address2}">
          </div>
          <div class="w-clearfix">
            {error:shipping_city}<label class="checkoutlabel" for="name-17">City:</label>
            <input class="w-input checkoutfield" id="shipping_city" type="text" name="shipping_city" value="{shipping_city}">
          </div>
          <div class="w-clearfix">
            <label class="checkoutlabel" for="name-23">Postcode:</label>
            <input class="w-input checkoutfield" id="shipping_postcode" type="text" name="shipping_postcode" value="{shipping_postcode}">
          </div>
          <div class="w-clearfix">
            <label class="checkoutlabel" for="field-3">State:</label>
            <select class="w-select checkoutfield" id="shipping_state" name="shipping_state" value="{shipping_state}">
              {shipping_state_options}
            </select>
          </div>
          <div class="w-clearfix">
            {error:shipping_country}<label class="checkoutlabel" for="field-4">Country:</label>
            <select class="w-select checkoutfield" id="shipping_country" name="shipping_country">
              {shipping_country_options}
            </select>
          </div>
          <div class="w-clearfix">
            <label class="checkoutlabel" for="name-22">Phone:</label>
            <input class="w-input checkoutfield" id="shipping_phone" type="text" name="shipping_phone" value="{shipping_phone}">
          </div>
      </div>
    </div>
    <div class="forminfotextblock">
      <p class="forminfotext">Shipping Method</p>
    </div>
    <div class="formblock">
      <div class="w-form">
      {shipping_methods}
          <div class="w-radio">
           <label class="w-form-label" for="shipping_method">
               <input type="radio" class="w-radio-input" name="shipping_method" value="{method_title}" id="{method_id}" />
               {method_title}
           </label>
          </div>      
      {/shipping_methods}           


         </div>
         <span id="overnightInfo" style="display:none">
          <input class="w-input overnightaccountinfo" id="field" type="text" placeholder="Enter your account number" name="field">
          <br/>
          <input class="w-input overnightaccountinfo" id="field-2" type="text" placeholder="Enter your account carrier" name="field-2" data-name="Field 2">
         </span>
         <br/>
          <input class="w-button formbutton" name="next" type="submit" value="Review Order">
      </div>

Answer 1

下拉列表是一个“选择”元素，而不是一个输入，因此jQuery不会找到您的下拉列表。您只需更改“输入”为“选择”您的下拉列表。

$("input[name='shipping_postcode']").val($("input[name='billing_postcode']").val());
$("select[name='shipping_state']").val($("select[name='billing_state']").val());

JS：http://jsfiddle.net/7Ht3c/ (我没有费心清理标记，因为这个问题仍然存在)

Answer 2

<input type="button" name="Copy" value="Copy Billing Address" id="billingtoshipping_checkbox"> 

<script type="text/javascript">

$(document).ready(function(){
    $("#billingtoshipping_checkbox").click(function(){
        $("[id^='shipping_']").each(function(){
            data=$(this).attr("id")
            tmpID = data.split('shipping_');
            $(this).val($("#billing_"+tmpID[1]).val())
        })
    });
});
</script>