如果勾选了复选框，则文本框不能为空 [英] textbox must not be empty if checkbox is ticked

问题描述

我有三个复选框。每个复选框旁边都有一个名称和年龄文本框。 单曲复选框有一组这些文本框，而情侣复选框有两组。我正在寻找能够在提交表单之前提供提醒消息的代码，以便在勾选相应的复选框时必须填写所有文本框。例如，如果仅勾选单曲复选框，则仅选中单曲文本框。如果选中单身人士和情侣，则必须完成单身人士和情侣的文本框。我已经尝试了下面的代码：

I have three checkboxes. Each checkbox has a 'name' and 'age' text box next to them. 'Singles' checkbox box has one set of these textboxes while 'Couples' checkbox has two sets. I'm looking for code which will provide an 'alert' message prior to submitting a form to say all textboxes must be filled in if corresponding checkbox is ticked. For instance, if only 'Singles' checkbox is ticked, only 'Singles' Textboxes to be checked. If 'Singles' and 'Couples' Checked, Textboxes for 'Singles' and 'Couples' must be complete. I've tried the below code:

请注意，还有一个检查，以确保在开始时输入'yournameis'，确实勾选了一个复选框。谢谢。

Please note, there is also a check to make sure a 'yournameis' is entered at the start and that indeed a checkbox is ticked. Thanks.

  function validate_checkboxform( form )
    {
        //Custom Validation Steps
        if( ltrim(rtrim(form.elements['yournameis'].value,' '),' ')=="" ) { alert("Please enter text. "); form.elements['yournameis'].focus(); return false; }
        //Custom Validation for element
        var fo = document.checkboxform;
        var checkboxform=document.getElementById("checkboxform"); 
    if (!fo.singles1.checked && !fo.couples1.checked && !fo.families1.checked) {
          alert("You must select at least one option.");
          return false;
    }
       if (this.singles1.checked && this.singlesname1.value=="") {
          alert("Please enter something in input 1");
          this.singlesname1.focus();
          return false;
        }
        if (this.couples1.checked && this.couplesname1.value=="") {
          alert("Please enter something in input 2");
          this.couplesname1.focus();
          return false;
      }
        return true;
    }

推荐答案

function validate_checkboxform( form )
{
  if($('#isCheckBox').is(':checked') && $("#textBox").val().length <0)
     alert("value of textBox needed..");
}
<input type="checkbox" id="isCheckBox"/>
<input type="text" id="textBox"/>

对3个复选框重复相同的操作。输入小提琴这里

Repeat the same for 3 checkboxes & inputs fiddle 'd here

这篇关于如果勾选了复选框，则文本框不能为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！