使用jQuery根据复选框验证文本框。

huangapple
go评论238阅读模式
英文:

Jquery - validate textbox based on checkbox

问题

I want to validate a value only when a checkbox is checked. I am able to get the validation running but if the checkbox is unchecked, the validation still runs.

Here is my code:

  1. $("#personal_deliver_same").on("click", function(){
  2.   var check = $("#personal_deliver_same").is(':checked');
  3.   if(check){
  4.     $("#input-payment-postcode").keyup(function (){ 
  5.       if($("#input-payment-postcode").val().length > 5) {
  6.         alert("in2");
  7.       }
  8.     });		
  9.   }
  10.   else{
  11.     alert("out2");
  12.   }
  13. });		
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  3. <label class="control-label" for="input-payment-postcode">Post Code</label>
  4. <input type="text" name="personal_details[postcode]" value="" placeholder="" id="input-payment-postcode" class="formcontrol">
  5. <br>
  6. <input type="checkbox" id="personal_deliver_same" name="personal_details[shipping_address]" value="1" />
  7. <label>My Checkbox</label>
英文:

I want to validate a value only when a checkbox is checked. I am able to get the validation running but if the checkbox is unchecked, the validation still runs.

Here is my code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(&quot;#personal_deliver_same&quot;).on(&quot;click&quot;, function(){
  2.   var check = $(&quot;#personal_deliver_same&quot;).is(&#39;:checked&#39;);
  3.   if(check){
  4.     $(&quot;#input-payment-postcode&quot;).keyup(function (){ 
  5.       if($(&quot;#input-payment-postcode&quot;).val().length &gt; 5) {
  6.         alert(&quot;in2&quot;);
  7.       }
  8.     });		
  9.   }
  10.   else{
  11.     alert(&quot;out2&quot;);
  12.   }
  13. });

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;label class=&quot;control-label&quot; for=&quot;input-payment-postcode&quot;&gt;Post Code&lt;/label&gt;
  4. &lt;input type=&quot;text&quot; name=&quot;personal_details[postcode]&quot; value=&quot;&quot; placeholder=&quot;&quot; id=&quot;input-payment-postcode&quot; class=&quot;formcontrol&quot;&gt;
  5. &lt;br&gt;
  6. &lt;input type=&quot;checkbox&quot; id=&quot;personal_deliver_same&quot; name=&quot;personal_details[shipping_address]&quot; value=&quot;1&quot; /&gt;
  7. &lt;label&gt;My Checkbox&lt;/label&gt;

<!-- end snippet -->

答案1

得分: 1

I think this will be what you want.

  • 它将把复选框的值存储在一个变量中
  • 它将监视复选框的 input 事件，而不仅仅是 click。现在当值发生变化时，事件将发生
  • 它将监视文本框的 input 事件以检测变化。如果发生变化并且复选框被选中，它将显示输出
  • 当复选框被选中时，它也会触发文本框上的事件
  1. const $checkbox = $("#personal_deliver_same");
  2. const $txtPostCode = $("#input-payment-postcode");
  3. let isChecked = $checkbox.is(":checked");
  5. $checkbox.on("input", function(){
  6.   isChecked = $checkbox.is(":checked");
  7.   console.log("Checkbox changed:", isChecked);
  8.   
  9.   if(isChecked){
  10.     $txtPostCode.trigger('input');
  11.   }
  12. });
  14. $txtPostCode.on('input', function (){ 
  15.   if(isChecked) {
  16.     if($txtPostCode.val().length > 5){
  17.       console.log("post code length is more than 5");
  18.     } else {
  19.       console.log("post code length is 5 or less");
  20.     }
  21.   }
  22. });
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  3. <label class="control-label" for="input-payment-postcode">Post Code</label>
  4. <input type="text" name="personal_details[postcode]" value="" placeholder="" id="input-payment-postcode" class="formcontrol">
  5. <br>
  6. <input type="checkbox" id="personal_deliver_same" name="personal_details[shipping_address]" value="1" />
  7. <label for="personal_deliver_same">My Checkbox</label>

请注意，这些是您提供的代码的中文翻译部分，不包括问题或其他内容。

英文:

I think this will be what you want.

  • It will store the value of the checkbox in a variable
  • it will monitor the checkbox's input event instead of just click. Now when the value changes the event will occur
  • It will monitor the input event of the text box for changes. If a change happens and the box is checked it will show you the output
  • When the box is checked, it will also fire the event on the textbox

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const $checkbox = $(&quot;#personal_deliver_same&quot;);
  2. const $txtPostCode = $(&quot;#input-payment-postcode&quot;);
  3. let isChecked = $checkbox.is(&quot;:checked&quot;);
  5. $checkbox.on(&quot;input&quot;, function(){
  6.   isChecked = $checkbox.is(&quot;:checked&quot;);
  7.   console.log(&quot;Checkbox changed:&quot;, isChecked);
  8.   
  9.   if(isChecked){
  10.     $txtPostCode.trigger(&#39;input&#39;);
  11.   }
  12. });
  14. $txtPostCode.on(&#39;input&#39;, function (){ 
  15.   if(isChecked) {
  16.     if($txtPostCode.val().length &gt; 5){
  17.       console.log(&quot;post code length is more than 5&quot;);
  18.     } else {
  19.       console.log(&quot;post code length is 5 or less&quot;);
  20.     }
  21.   }
  22. });

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;label class=&quot;control-label&quot; for=&quot;input-payment-postcode&quot;&gt;Post Code&lt;/label&gt;
  4. &lt;input type=&quot;text&quot; name=&quot;personal_details[postcode]&quot; value=&quot;&quot; placeholder=&quot;&quot; id=&quot;input-payment-postcode&quot; class=&quot;formcontrol&quot;&gt;
  5. &lt;br&gt;
  6. &lt;input type=&quot;checkbox&quot; id=&quot;personal_deliver_same&quot; name=&quot;personal_details[shipping_address]&quot; value=&quot;1&quot; /&gt;
  7. &lt;label for=&quot;personal_deliver_same&quot;&gt;My Checkbox&lt;/label&gt;

<!-- end snippet -->

答案2

得分: 1

你正在错误的顺序绑定你的事件处理程序，并且在需要时没有进行检查。尝试这种方式：

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <label class="control-label" for="input-payment-postcode">邮编</label>
  3. <input type="text" name="personal_details[postcode]" value="" placeholder="" id="input-payment-postcode" class="formcontrol">
  4. <br>
  5. <input type="checkbox" id="personal_deliver_same" name="personal_details[shipping_address]" value="1">
  6. <label>我的复选框</label>
  1. var check = false;
  3. $("#personal_deliver_same").on("click", function() {
  4.   check = $("#personal_deliver_same").is(':checked');
  5. });
  7. $("#input-payment-postcode").keyup(function() {
  8.   if (check && $("#input-payment-postcode").val().length > 5) {
  9.     console.log("in2");
  10.   }
  11. });

（注意：我已经将代码和HTML分别翻译，没有翻译的部分不包括在内。）

英文:

You're binding your event handlers in the wrong sequence and not checking it when you need to. Try this way:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. var check = false;
  3. $(&quot;#personal_deliver_same&quot;).on(&quot;click&quot;, function() {
  4.   check = $(&quot;#personal_deliver_same&quot;).is(&#39;:checked&#39;);
  5. });
  8. $(&quot;#input-payment-postcode&quot;).keyup(function() {
  9.   if (check &amp;&amp; $(&quot;#input-payment-postcode&quot;).val().length &gt; 5) {
  10.     console.log(&quot;in2&quot;);
  11.   }
  12. });

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;label class=&quot;control-label&quot; for=&quot;input-payment-postcode&quot;&gt;Post Code&lt;/label&gt;
  4. &lt;input type=&quot;text&quot; name=&quot;personal_details[postcode]&quot; value=&quot;&quot; placeholder=&quot;&quot; id=&quot;input-payment-postcode&quot; class=&quot;formcontrol&quot;&gt;
  5. &lt;br&gt;
  6. &lt;input type=&quot;checkbox&quot; id=&quot;personal_deliver_same&quot; name=&quot;personal_details[shipping_address]&quot; value=&quot;1&quot; /&gt;
  7. &lt;label&gt;My Checkbox&lt;/label&gt;

<!-- end snippet -->

答案3

得分: 0

  1. <label for="postcode">邮政编码</label>
  2. <input id="postcode" />
  4. <input id="validate" type="checkbox">
  5. <label for="validate">验证邮政编码？</label>
  7. <script>
  8.   $('#validate').on('click', () => shouldValidate())
  9.   $('#postcode').on('keyup', () => shouldValidate())
  11.   function shouldValidate(){
  12.     if( $('#validate').is(':checked') )
  13.       // 验证
  14.     else
  15.       // 不验证
  16.   }
  17. </script>
英文: 
  1. &lt;label for=&quot;postcode&quot;&gt;Post Code&lt;/label&gt;
  2. &lt;input id=&quot;postcode&quot; /&gt;
  4. &lt;input id=&quot;validate&quot; type=&quot;checkbox&quot;&gt;
  5. &lt;label for=&quot;validate&quot;&gt;Validate Post Code?&lt;/label&gt;
  7. &lt;script&gt;
  8.   $(&#39;#validate&#39;).on(&#39;click&#39;,() =&gt; shouldValidate() )
  9.   $(&#39;#postcode&#39;).on(&#39;keyup&#39;,() =&gt; shouldValidate() )
  11.   function shouldValidate(){
  12.     if( $(&#39;#validate&#39;).is(&#39;:checked&#39;) )
  13.       // Validate
  14.     else
  15.       // Don&#39;t Validate
  16.   }
  17. &lt;/script&gt;

huangapple
  • 本文由 发表于 2023年8月11日 02:10:50
  • 转载请务必保留本文链接：https://go.coder-hub.com/76878321.html
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定