title: when a checkbox is selected a div is open and need to alert text field values in that particular div using javascript
body: <p>i have a form and i contains some checkboxes. When a checkbox is selected a div open and in that div there are some text fields. What i need to is when a check box is selected i need to alert textfield values in that particular div when a form is submitted. i have many checkboxes and need to apply this validation on all of them. A customer can select one or can select more than one checkboxes
  it works like this <a href="https://i.stack.imgur.com/bQgYF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bQgYF.png" alt="enter image description here"></a> <a href="https://i.stack.imgur.com/M5stj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M5stj.png" alt="enter image description here"></a>.i have reduced the code so that if i get the answer i will modify it according to the code afterwards
  here is the code</p>
  
  <p>Html</p>
  
  <pre><code>&lt;div class="step"&gt;
                      &lt;div class="col-md-6 col-sm-6"&gt;
                          &lt;div class="form-group options"&gt;
                              &lt;strong&gt;Building cleaning&lt;/strong&gt;
                              &lt;label class="switch-light switch-ios pull-right"&gt;
                                  &lt;input type="checkbox" name="option" id="check1" value="Building cleaning"&gt;
                                  &lt;span&gt;
                                  &lt;span&gt;No&lt;/span&gt;
                                  &lt;span&gt;Yes&lt;/span&gt;
                                  &lt;/span&gt;
                                  &lt;a&gt;&lt;/a&gt;
                              &lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6 col-sm-6"&gt;
                          &lt;div class="form-group options"&gt;
                              &lt;strong&gt;Office Cleaning&lt;/strong&gt;
                              &lt;label class="switch-light switch-ios pull-right"&gt;
                                  &lt;input type="checkbox" name="option" id="check2" value="Office Cleaning"&gt;
                                  &lt;span&gt;
                                  &lt;span&gt;No&lt;/span&gt;
                                  &lt;span&gt;Yes&lt;/span&gt;
                                  &lt;/span&gt;
                                  &lt;a&gt;&lt;/a&gt;
                              &lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-md-6 col-sm-6"&gt;
                          &lt;div class="form-group options"&gt;
                              &lt;strong&gt;Resturant &amp; Kitchen Cleaning&lt;/strong&gt;
                              &lt;label class="switch-light switch-ios pull-right"&gt;
                                  &lt;input type="checkbox" name="option" id="check3" value="Resturant &amp; Kitchen Cleaning"&gt;
                                  &lt;span&gt;
                                  &lt;span&gt;No&lt;/span&gt;
                                  &lt;span&gt;Yes&lt;/span&gt;
                                  &lt;/span&gt;
                                  &lt;a&gt;&lt;/a&gt;
                              &lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6 col-sm-6"&gt;
                          &lt;div class="form-group options"&gt;
                              &lt;strong&gt;Hotal Cleaning&lt;/strong&gt;
                              &lt;label class="switch-light switch-ios pull-right"&gt;
                                  &lt;input type="checkbox" name="option" id="check4" value="Hotal Cleaning"&gt;
                                  &lt;span&gt;
                                  &lt;span&gt;No&lt;/span&gt;
                                  &lt;span&gt;Yes&lt;/span&gt;
                                  &lt;/span&gt;
                                  &lt;a&gt;&lt;/a&gt;
                              &lt;/label&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
            &lt;/div&gt;
   &lt;div class="roc-none" style="display:none"&gt;
              &lt;div class="col-md-12"&gt;&lt;h4&gt;Office Cleaning&lt;/h4&gt;&lt;/div&gt;   
                  &lt;div class="col-md-6 col-sm-6"&gt;
                      &lt;div class="form-group options"&gt;
                          &lt;strong&gt;General Cleaning&lt;/strong&gt;
                          &lt;label class="switch-light switch-ios pull-right"&gt;
                              &lt;input type="checkbox" name="option_8" id="option_8" value="Yes"&gt;
                              &lt;span&gt;
                              &lt;span&gt;No&lt;/span&gt;
                              &lt;span&gt;Yes&lt;/span&gt;
                              &lt;/span&gt;
                              &lt;a&gt;&lt;/a&gt;
                          &lt;/label&gt;
                      &lt;/div&gt;
                &lt;/div&gt;     
                  &lt;div class="col-md-6 col-sm-6"&gt;
                      &lt;div class="form-group options"&gt;
                          &lt;strong&gt;Deep Cleaning&lt;/strong&gt;
                          &lt;label class="switch-light switch-ios pull-right"&gt;
                              &lt;input type="checkbox" name="option_9" id="option_9" value="Yes"&gt;
                              &lt;span&gt;
                              &lt;span&gt;No&lt;/span&gt;
                              &lt;span&gt;Yes&lt;/span&gt;
                              &lt;/span&gt;
                              &lt;a&gt;&lt;/a&gt;
                          &lt;/label&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;div class="col-md-6 col-sm-6"&gt;
                      &lt;div class="form-group"&gt;
                      &lt;label&gt;Measurment &lt;/label&gt;
                     &lt;input type="text" class="form-control" id="measurment1" name="measurment1"   /&gt;
                 &lt;/div&gt; 
                  &lt;/div&gt;
                  &lt;div class="col-md-6 col-sm-6"&gt;
                      &lt;div class="form-group"&gt;
                      &lt;label&gt;Description &lt;/label&gt;
                     &lt;input type="text" class="form-control" id="description1" name="description1"/&gt;
                 &lt;/div&gt; 
                  &lt;/div&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;
            &lt;hr&gt; 
            &lt;/div&gt; 
  
            &lt;h2 class="rkc-none" style="display:none"&gt;Resturant &amp; Kitchen Cleaning&lt;/h2&gt;
            &lt;div class="rkc-none"  style="display:none"&gt;
            &lt;div class="col-md-12"&gt;&lt;h4&gt;Resturant &amp; Kitchen Cleaning&lt;/h4&gt;&lt;/div&gt;
                  &lt;div class="col-md-6 col-sm-6"&gt;
                      &lt;div class="form-group options"&gt;
                          &lt;strong&gt;Interior&lt;/strong&gt;
                          &lt;label class="switch-light switch-ios pull-right"&gt;
                              &lt;input type="checkbox" name="option_10" id="option_10" value="Yes"&gt;
                              &lt;span&gt;
                              &lt;span&gt;No&lt;/span&gt;
                              &lt;span&gt;Yes&lt;/span&gt;
                              &lt;/span&gt;
                              &lt;a&gt;&lt;/a&gt;
                          &lt;/label&gt;
                      &lt;/div&gt;
                &lt;/div&gt;     
                  &lt;div class="col-md-6 col-sm-6"&gt;
                      &lt;div class="form-group options"&gt;
                          &lt;strong&gt;Exterior&lt;/strong&gt;
                          &lt;label class="switch-light switch-ios pull-right"&gt;
                              &lt;input type="checkbox" name="option_11" id="option_11" value="Yes"&gt;
                              &lt;span&gt;
                              &lt;span&gt;No&lt;/span&gt;
                              &lt;span&gt;Yes&lt;/span&gt;
                              &lt;/span&gt;
                              &lt;a&gt;&lt;/a&gt;
                          &lt;/label&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;div class="col-md-6 col-sm-6"&gt;
                      &lt;div class="form-group options"&gt;
                          &lt;strong&gt;W/Facade&lt;/strong&gt;
                          &lt;label class="switch-light switch-ios pull-right"&gt;
                              &lt;input type="checkbox" name="option_12" id="option_12" value="Yes"&gt;
                              &lt;span&gt;
                              &lt;span&gt;No&lt;/span&gt;
                              &lt;span&gt;Yes&lt;/span&gt;
                              &lt;/span&gt;
                              &lt;a&gt;&lt;/a&gt;
                          &lt;/label&gt;
                      &lt;/div&gt; 
                  &lt;/div&gt;
                  &lt;div class="col-md-6 col-sm-6"&gt;
                      &lt;div class="form-group"&gt;
                      &lt;label&gt;Description &lt;/label&gt;
                     &lt;input type="text" class="form-control" id="description2"  /&gt;
                 &lt;/div&gt; 
                  &lt;/div&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;
            &lt;hr&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>this code shows me which option use selected <strong>Javascript</strong></p>
  
  <pre><code>    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&lt;chck.length; i++) {
       selectbox.push(chck[i].value);
  
  
  
        }
      alert(selectbox)
                  }
  </code></pre>