如何通过单击复选框将文本元素从输入复制到另一个输入？

Question

我是新手。我想将来自shippingName和shippingZip的输入文本复制到输入文本billingName和billingZip（如果单击chekbox）。我尝试了几件事，但无法得到结果。

这是我的代码：

function billingFunction(){
  var shippingName = document.getElementById("shippingName");
  var shippingZip = document.getElementById("shippingZip");
  var billingName = document.getElementById("billingName");
  var billingZip = document.getElementById("billingZip");
  if (document.getElementById("same").checked == true){
    document.getElementById("billingName").value = document.getElementById("billingName").value;
    document.getElementById("billingZip").value = document.getElementById("billingZip").value;
  }
}

<form>		
  <fieldset>
  <legend>Shipping Information</legend>			  
  <label for ="shippingName">Name:</label>		  
  <input type = "text" name = "Name" id = "shippingName" required><br/>

   <label for = "shippingzip">Zip code:</label>		  
  <input type = "text" name = "zip" id = "shippingZip" pattern = "[0-9]{5}" required><br/>
  </fieldset>
  <input type="checkbox" id="same" name="same" onchange= "billingFunction()"/>		
  <label for = "same">Is the Billing Information the Same?</label>						
  <fieldset>
    <legend>Billing Information</legend>			  
  <label for ="billingName">Name:</label>		  
  <input type = "text" name = "Name" id = "billingName" required><br/>

  <label for = "billingzip">Zip code:</label>		  
  <input type = "text" name = "zip" id = "billingZip" pattern = "[0-9]{5}" required><br/>
  </fieldset>

  <input type = "submit" value = "Verify"/>	
</form>

Answer 1

因为您要将值从BillingName分配到BillingName，将billingZip分配给billingZip，这是空的。

以下是working jsfiddle尝试此JavaScript：

function billingFunction() {

  var shippingName = document.getElementById("shippingName");
  var shippingZip = document.getElementById("shippingZip");
  var billingName = document.getElementById("billingName");
  var billingZip = document.getElementById("billingZip");
  if (document.getElementById("same").checked == true) {
    billingName.value = shippingName.value;
    billingZip.value = shippingZip.value;
  }
}

Answer 2

2件事：

不要将布尔变量与布尔基元进行比较：

if(document.getElementById("same").checked == true) //DON'T NEED THIS

只是做：

if(document.getElementById("same").checked)

您重复了billingZip和billingName。这里：

document.getElementById("billingName").value = document.getElementById("billingName").value;
document.getElementById("billingZip").value = document.getElementById("billingZip").value;

＆＃13;

＆＃13;

function billingFunction(){
  var shippingName = document.getElementById("shippingName");
  var shippingZip = document.getElementById("shippingZip");
  var billingName = document.getElementById("billingName");
  var billingZip = document.getElementById("billingZip");
  if (document.getElementById("same").checked){
    document.getElementById("billingName").value = document.getElementById("shippingName").value;
    document.getElementById("billingZip").value = document.getElementById("shippingZip").value;
  }
}

＆＃13;

<form>		
  <fieldset>
  <legend>Shipping Information</legend>			  
  <label for ="shippingName">Name:</label>		  
  <input type = "text" name = "Name" id = "shippingName" required><br/>

   <label for = "shippingzip">Zip code:</label>		  
  <input type = "text" name = "zip" id = "shippingZip" pattern = "[0-9]{5}" required><br/>
  </fieldset>
  <input type="checkbox" id="same" name="same" onchange= "billingFunction()"/>		
  <label for = "same">Is the Billing Information the Same?</label>						
  <fieldset>
    <legend>Billing Information</legend>			  
  <label for ="billingName">Name:</label>		  
  <input type = "text" name = "Name" id = "billingName" required><br/>

  <label for = "billingzip">Zip code:</label>		  
  <input type = "text" name = "zip" id = "billingZip" pattern = "[0-9]{5}" required><br/>
  </fieldset>

  <input type = "submit" value = "Verify"/>	
</form>

＆＃13;

＆＃13;

＆＃13;