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”屬性。 在html兩個<input type="text">元素的class屬性設置為"quotation_request_down_payment" ，而不是單個具有id元素。 切換display的的<input type="text">元素的從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>