jQuery的幫助：想輸入設置佔位符值的字段

Question

所以，這裏是我的jQuery代碼：

if($('#quotation_request_payment_option_lease').is(':checked')){ 
    $('#quotation_request_down_payment').attr('placeholder', "1300"); 
    } 

else if($('#quotation_request_payment_option_finance').is(':checked')) 
    { 
    $('#quotation_request_down_payment').attr('placeholder', "1500"); 
    } 

如果quotation_request_payment_option_lease複選框被選中，那麼我想在quotation_request_down_payment輸入字段佔位符設置爲1300。

而且如果quotation_request_payment_option_finance複選框被選中，那麼我想在quotation_request_down_payment輸入字段佔位符眼下設置爲1500

，頁面的默認狀態是quotation_request_payment_option_lease複選框被選中，所以當我加載頁面時，quoation_request_down_payment輸入字段的佔位符被設置爲1300（這是我想要的）。

我遇到的問題是，當我檢查quotation_request_payment_option_finance複選框（注意：它的設置，以便一次只能檢查兩個複選框中的一個），佔位符保持1300，它不會更改爲1500

任何人都可以想辦法解決這個問題嗎？

Answer 1

您必須在事件內做這些驗證，像change()

綁定的事件處理程序，以「變」 JavaScript事件，或者觸發元素上的事件。

*您可以做到這一點沒有一個類（.ckbox），與選擇$("input[type='checkbox']")

$(".ckbox").change(function() { 
 
    if ($('#quotation_request_payment_option_lease').is(':checked')) { 
 
    $('#quotation_request_down_payment').attr('placeholder', "1300"); 
 
    } else if ($('#quotation_request_payment_option_finance').is(':checked')) { 
 
    $('#quotation_request_down_payment').attr('placeholder', "1500"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="quotation_request_payment_option_lease" class="ckbox"><br> 
 
<input type="checkbox" id="quotation_request_payment_option_finance" class="ckbox"> 
 
<br> 
 
<input type="text" id="quotation_request_down_payment" placeholder="default">

Answer 2

您必須處理的onclick這樣就可以啓動你需要的檢查去表演。 就是這樣。 向這兩個複選框添加一個類，然後添加該類的單擊偵聽器。

$('check_box_class').on('click', function(){ 
     if($('#quotation_request_payment_option_lease').is(':checked')) { 
      $('#quotation_request_down_payment').attr('placeholder', "1300"); 
     }else if($('#quotation_request_payment_option_finance').is(':checked')) { 
      $('#quotation_request_down_payment').attr('placeholder', "1500"); 
     } 
}); 

Answer 3

（注意：它的設置使得僅兩個複選框中的一個可以被檢查 一次）

替代<input type="radio">元素<input type="checkbox">元件的每一個具有name屬性設置爲「quotation_request_down_payment 「 。將兩個<input type="text">元素的class屬性設置爲"quotation_request_down_payment"在html而不是具有id的單元素。將<input type="text">元素的display從inline-block切換到none利用css:checked，相鄰的兄弟選擇器+和:not()。

#quotation_request_payment_option_lease:checked 
 
+ input + input { 
 
    display: inline-block; 
 
} 
 

 
#quotation_request_payment_option_lease:not(:checked) 
 
+ input + input, 
 
#quotation_request_payment_option_lease:checked 
 
+ input + input + input { 
 
    display: none; 
 
}

<form> 
 
    <input type="radio" 
 
     id="quotation_request_payment_option_lease" 
 
     name="quotation_request_payment_option" 
 
     value="finance" checked> 
 
    <input type="radio" 
 
     id="quotation_request_payment_option_finance" 
 
     name="quotation_request_payment_option" 
 
     value="finance"> 
 
    <input type="text" 
 
     name="quotation_request_payment_option_lease" 
 
     placeholder="1300" 
 
     class="quotation_request_down_payment" 
 
     value="1300"> 
 
    <input type="text" 
 
     name="quotation_request_payment_option_finance" 
 
     placeholder="1500" 
 
     class="quotation_request_down_payment" 
 
     value="1500"> 
 
</form>