填寫文本框，單擊複選框使用JavaScript

Question

後

我有一個表單名和姓以下文本輸入：

<label>First name: </label></td> 
<input type="text" name="firstName"> 
<label>Last name: </label></td> 
<input type="text" name="lastName"></td> 

然後我有信用卡持有人，然後一個複選框另一個文本輸入：

<input type="text" size="20" id="nameOnCard" name="nameOnCard" data-stripe="name"/></td> 
<input type="checkbox" id="sameNameOnCard"> 

我希望#nameOnCard輸入在用戶點擊複選框時填寫名字和姓氏。

我開始用一些這樣的腳本：

$(document).ready(function(){ 
    $("#sameNameOnCard").click(function(){ 

我應該如何檢索來自Firts名和姓的信息，並將其插入到nameOnCard盒子？

謝謝！

Answer 1

嘗試：

$(document).ready(function(){ 
    $("#sameNameOnCard").on("click", function() { 
     var firstName, lastName; 
     if ($(this).is(":checked")) { 
      firstName = $('[name="firstName"]').val(); 
      lastName = $('[name="lastName"]').val(); 
      $("#nameOnCard").val(firstName + " " + lastName).prop("readonly", true); 
     } else { 
      $("#nameOnCard").val("").prop("readonly", false); 
     } 
    }); 
}); 

DEMO：http://jsfiddle.net/hF26S/1/

它會得到第一個和最後一個名字的元素與jQuery的「屬性等於」選擇（因爲只有這樣，才能讓他們是name屬性），使用.val()獲取它們的值，然後設置最終的文本框的值。

我添加了一些額外的東西，當複選框被選中時，將「nameOnCard」元素設置爲readonly，因此當它被選中時不能輸入。

如果複選框在被點擊時被選中，它會複製名字和姓氏。如果該複選框未被選中，則它將該值設置爲空。

參考文獻：

• http://api.jquery.com/attribute-equals-selector/
• http://api.jquery.com/prop/

Answer 2

試試這個

$(document).ready(function(){ 
     $("#sameNameOnCard").click(function(){ 
     if($(this).is(":checked")) 
     { 
      $("#nameOnCard").val($("input:[name=firstName]").val() + " " + $("input:[name=lastName]").val()); 
     } 
     else 
     { 
       $("#nameOnCard").val(""); 
     } 
    });