Question

我有一个“送货”表单，我想让用户只需选中一个复选框即可将输入值复制到“结算”表单。

我已经编写了一个有效的解决方案 - 但是，我对jQuery有些新意，并希望对我如何实现这一目标提出一些批评。这样做得好 - 你推荐的任何重构吗？

非常感谢任何建议！

剧本

<script type="text/javascript">
$(function() {
   $("#copy").click(function() {
  if($(this).is(":checked")){
    var $allShippingInputs = $(":input:not(input[type=submit])", "form#shipping");
    $allShippingInputs.each(function() {
      var billingInput = "#" + this.name.replace("ship", "bill");
      $(billingInput).val($(this).val());
    })
    //console.log("checked");
  } else {
    $(':input','#billing')
    .not(':button, :submit, :reset, :hidden')
    .val('')
    .removeAttr('checked')
    .removeAttr('selected');
    //console.log("not checked")
  }
 });
});
</script>

表格

<div>
  <form action="" method="get" name="shipping" id="shipping">
    <fieldset>
      <legend>Shipping</legend>
      <ul>
        <li>
          <label for="ship_first_name">First Name:</label>
          <input type="text" name="ship_first_name" id="ship_first_name" value="John" size="" />
        </li>
        <li>
          <label for="ship_last_name">Last Name:</label>
          <input type="text" name="ship_last_name" id="ship_last_name" value="Smith" size="" />
        </li>
        <li>
          <label for="ship_state">State:</label>
          <select name="ship_state" id="ship_state">
            <option value="RI">Rhode Island</option>
            <option value="VT" selected="selected">Vermont</option>
            <option value="CT">Connecticut</option>
          </select>
        </li>
        <li>
          <label for="ship_zip_code">Zip Code</label>
          <input type="text" name="ship_zip_code" id="ship_zip_code" value="05401" size="8" />
        </li>
        <li>
          <input type="submit" name="" />
        </li>
      </ul>
    </fieldset>
  </form>
</div>
<div>
  <form action="" method="get" name="billing" id="billing">
    <fieldset>
      <legend>Billing</legend>
      <ul>
        <li>
          <input type="checkbox" name="copy" id="copy" />
          <label for="copy">Same of my shipping</label>
        </li>
        <li>
          <label for="bill_first_name">First Name:</label>
          <input type="text" name="bill_first_name" id="bill_first_name" value="" size="" />
        </li>
        <li>
          <label for="bill_last_name">Last Name:</label>
          <input type="text" name="bill_last_name" id="bill_last_name" value="" size="" />
        </li>
        <li>
          <label for="bill_state">State:</label>
          <select name="bill_state" id="bill_state">
            <option>-- Choose State --</option>
            <option value="RI">Rhode Island</option>
            <option value="VT">Vermont</option>
            <option value="CT">Connecticut</option>
          </select>
        </li>
        <li>
          <label for="bill_zip_code">Zip Code</label>
          <input type="text" name="bill_zip_code" id="bill_zip_code" value="" size="8" />
        </li>
        <li>
          <input type="submit" name="" />
        </li>
      </ul>
    </fieldset>
  </form>
</div>

Answer 1

我建议丢失FORM代码并改为使用FIELDSET：

<fieldset name="shipping" id="shipping">
<fieldset name="billing" id="billing">

此外，

$(document).ready(function() {
   $("#copy").click(function() {
    ...
   }
});

使用JQuery将一个表单的值复制到另一个表单

1 个答案: