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

How to copy text element from input into another input by clicking on a checkbox?

本文关键字：输入 复制 另一个 元素 文本 何通过 单击 复选框      更新时间：2023-09-26

我是新手。我想将输入文本从运输名称和运输压缩复制到输入文本账单名称和账单Zip，如果点击了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>

因为您将值从 BillingName 分配给BillingName，billingZip分配给空的billingZip。

这是工作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;
  }
}

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;


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

相关文章：