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>