Question

我有一个表单，我包含一些复选框。当选中一个复选框时，div打开，在该div中有一些文本字段。我需要的是当选中一个复选框时，我需要在提交表单时提醒该特定div中的文本字段值。我有很多复选框，需要对所有复选框应用此验证。客户可以选择一个或可以选择多个复选框它的作用类似于。我减少了代码，这样如果我得到答案，我将根据代码修改它这是代码

HTML

<div class="step">
                    <div class="col-md-6 col-sm-6">
                        <div class="form-group options">
                            <strong>Building cleaning</strong>
                            <label class="switch-light switch-ios pull-right">
                                <input type="checkbox" name="option" id="check1" value="Building cleaning">
                                <span>
                                <span>No</span>
                                <span>Yes</span>
                                </span>
                                <a></a>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="form-group options">
                            <strong>Office Cleaning</strong>
                            <label class="switch-light switch-ios pull-right">
                                <input type="checkbox" name="option" id="check2" value="Office Cleaning">
                                <span>
                                <span>No</span>
                                <span>Yes</span>
                                </span>
                                <a></a>
                            </label>
                        </div>
                    </div>

                    <div class="col-md-6 col-sm-6">
                        <div class="form-group options">
                            <strong>Resturant & Kitchen Cleaning</strong>
                            <label class="switch-light switch-ios pull-right">
                                <input type="checkbox" name="option" id="check3" value="Resturant & Kitchen Cleaning">
                                <span>
                                <span>No</span>
                                <span>Yes</span>
                                </span>
                                <a></a>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="form-group options">
                            <strong>Hotal Cleaning</strong>
                            <label class="switch-light switch-ios pull-right">
                                <input type="checkbox" name="option" id="check4" value="Hotal Cleaning">
                                <span>
                                <span>No</span>
                                <span>Yes</span>
                                </span>
                                <a></a>
                            </label>

                        </div>
                    </div>
          </div>
 <div class="roc-none" style="display:none">
            <div class="col-md-12"><h4>Office Cleaning</h4></div>   
                <div class="col-md-6 col-sm-6">
                    <div class="form-group options">
                        <strong>General Cleaning</strong>
                        <label class="switch-light switch-ios pull-right">
                            <input type="checkbox" name="option_8" id="option_8" value="Yes">
                            <span>
                            <span>No</span>
                            <span>Yes</span>
                            </span>
                            <a></a>
                        </label>
                    </div>
              </div>     
                <div class="col-md-6 col-sm-6">
                    <div class="form-group options">
                        <strong>Deep Cleaning</strong>
                        <label class="switch-light switch-ios pull-right">
                            <input type="checkbox" name="option_9" id="option_9" value="Yes">
                            <span>
                            <span>No</span>
                            <span>Yes</span>
                            </span>
                            <a></a>
                        </label>
                    </div>
                    </div>
                <div class="col-md-6 col-sm-6">
                    <div class="form-group">
                    <label>Measurment </label>
                   <input type="text" class="form-control" id="measurment1" name="measurment1"   />
               </div> 
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class="form-group">
                    <label>Description </label>
                   <input type="text" class="form-control" id="description1" name="description1"/>
               </div> 
                </div>
          <div class="clear"></div>
          <hr> 
          </div> 

          <h2 class="rkc-none" style="display:none">Resturant & Kitchen Cleaning</h2>
          <div class="rkc-none"  style="display:none">
          <div class="col-md-12"><h4>Resturant & Kitchen Cleaning</h4></div>
                <div class="col-md-6 col-sm-6">
                    <div class="form-group options">
                        <strong>Interior</strong>
                        <label class="switch-light switch-ios pull-right">
                            <input type="checkbox" name="option_10" id="option_10" value="Yes">
                            <span>
                            <span>No</span>
                            <span>Yes</span>
                            </span>
                            <a></a>
                        </label>
                    </div>
              </div>     
                <div class="col-md-6 col-sm-6">
                    <div class="form-group options">
                        <strong>Exterior</strong>
                        <label class="switch-light switch-ios pull-right">
                            <input type="checkbox" name="option_11" id="option_11" value="Yes">
                            <span>
                            <span>No</span>
                            <span>Yes</span>
                            </span>
                            <a></a>
                        </label>
                    </div>
                    </div>
                <div class="col-md-6 col-sm-6">
                    <div class="form-group options">
                        <strong>W/Facade</strong>
                        <label class="switch-light switch-ios pull-right">
                            <input type="checkbox" name="option_12" id="option_12" value="Yes">
                            <span>
                            <span>No</span>
                            <span>Yes</span>
                            </span>
                            <a></a>
                        </label>
                    </div> 
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class="form-group">
                    <label>Description </label>
                   <input type="text" class="form-control" id="description2"  />
               </div> 
                </div>
          <div class="clear"></div>
          <hr>
          </div>

此代码显示了使用所选 Javascript

的选项

    var selectbox = [];
            var chck = $("input[name='option']:checked");
        if ( chck.length === 0) {
                bl= true;
                alert("Select at least one requirment")
            }
            else
            {
    for(var i=0; i<chck.length; i++) {
     selectbox.push(chck[i].value);



      }
    alert(selectbox)
                }

当选中一个复选框时，div处于打开状态，需要使用javascript

0 个答案: