Vor dem Anzeigen der nächsten div auf Click Check atleast 1 Checkbox sollte überprüft werden

Question

Ich habe folgende Voraussetzung, bevor nächste div zu zeigen atleast 1 Checkbox oder Radio sollte überprüft werden muss ist. es ist getan, aber, wenn der Benutzer wählen Fenster ac & wählen Sie alle 4 Dienste, dann auf nxet-Taste sollte für alle Dienste auf Nein von Unist fragen. Zuletzt booknow Tastenanzeige. Wenn er 2 Dienste auswählt, fragt er keine Einheiten für beide ausgewählten Dienste. Wenn er beide Fenster & split ac & auswählt, dann wählt er keine der Einheiten für ausgewählte Dienste für beide Typfenster & split.

Vielen Dank im Voraus.

Mein Code als

<div class="container quick-box-outer"> 
      <div class="voffset-7"> 
       <div class="col-md-12"> 
        <div class="panel panel-warning first current" id="step1"> 
         <div class="panel-heading">What we provide</div> 
         <div class="panel-body"> 
          <ul class="services-list"> 
           <li>Background checked and trained technicians</li> 
           <li>30 days service guarantee</li> 
          </ul> 
         </div> 
         <div class="panel-heading">Pricing</div> 
         <div class="panel-body"> 
          <ul class="services-list"> 
           <li>Fixed charges for installation, uninstallation and servicing</li> 
           <li>Charges for AC repairs will be quoted upon inspection</li> 
           <li>Rs.199 inspection charges if no service is availed post inspection</li> 
          </ul> 
         </div> 
        </div> 
        <div class="panel panel-warning" id="step2" style="display:none"> 
         <div class="panel-heading">What do you need?</div> 
         <div class="panel-body"> 
          <div class="col-sm-12"> 
           <div class="select-product"> 
            <input type="checkbox" name="windowac" id="windowac" class="mychk"> 
            <label for="windowac"> Window AC</label> 
           </div> 
          </div> 
          <div class="col-sm-12"> 
           <div class="select-product last"> 
            <input type="checkbox" id="splitac" name="fliptac" class="mychk"> 
            <label for="splitac">Split AC</label> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="panel panel-warning" id="step3" style="display:none"> 
         <div class="panel-heading">What type of service do you want?</div> 
         <div class="panel-body"> 
          <form id="step2"> 
           <div class="col-sm-12"> 
            <div class="select-product"> 
             <input type="checkbox" name="wetservice" id="wetservice" class="mychk"> 
             <label for="wetservice"> Wet Servicing (Jet pump service not included)</label> 
            </div> 
            <div class="select-product"> 
             <input type="checkbox" name="dryservice" id="dryservice"> 
             <label for="dryservice"> Dry Servicing</label> 
            </div> 
            <div class="select-product"> 
             <input type="checkbox" name="gas" id="gas"> 
             <label for="gas"> Gas Charging</label> 
            </div> 
            <div class="select-product last"> 
             <input type="checkbox" name="other" id="other"> 
             <label for="other"> Other repairs</label> 
            </div> 
           </div> 

          </form> 
         </div> 
        </div> 

        <div class="panel panel-warning last" id="step4" style="display:none"> 
         <div class="panel-heading">How many ACs need Wet servicing?</div> 
         <div class="panel-body"> 
          <form id="step2"> 
           <div class="col-sm-12"> 
            <div class="select-product"> 
             <label for="1unit"> 
              <span class="col-md-6"><input type="radio" name="units" id="1unit"> 1</span> 
              <span class="col-md-6 text-right">Rs 500</span> 
             </label> 
            </div> 
            <div class="select-product"> 
             <label for="2unit"> 
              <span class="col-md-6"> <input type="radio" name="units" id="2unit"> 2</span> 
              <span class="col-md-6 text-right">Rs 500</span> 
             </label> 
            </div> 
            <div class="select-product"> 
             <label for="3unit"> 
              <span class="col-md-6"><input type="radio" name="units" id="3unit"> 3</span> 
              <span class="col-md-6 text-right">Rs 500</span> 
             </label> 
            </div> 
            <div class="select-product"> 
             <label for="4unit"> 
              <span class="col-md-6"><input type="radio" name="units" id="4unit"> 4</span> 
              <span class="col-md-6 text-right">Rs 500</span> 
             </label> 
            </div> 
            <div class="select-product last"> 
             <label for="5unit"> 
              <span class="col-md-6"><input type="radio" name="units" id="5unit"> 5</span> 
              <span class="col-md-6 text-right">Rs 500</span> 
             </label> 
            </div> 
           </div> 
          </form> 
         </div> 
        </div> 
        <div class="panel panel-warning last" id="step5" style="display:none"> 
         <div class="panel-heading">How many ACs need Dry servicing?</div> 
         <div class="panel-body"> 
          <div class="col-sm-12"> 
           <div class="select-product"> 
            <label for="1unit"> 
             <span class="col-md-6"><input type="radio" name="units" id="1unit"> 1</span> 
             <span class="col-md-6 text-right">Rs 500</span> 
            </label> 
           </div> 
           <div class="select-product"> 
            <label for="2unit"> 
             <span class="col-md-6"> <input type="radio" name="units" id="2unit"> 2</span> 
             <span class="col-md-6 text-right">Rs 500</span> 
            </label> 
           </div> 
           <div class="select-product"> 
            <label for="3unit"> 
             <span class="col-md-6"><input type="radio" name="units" id="3unit"> 3</span> 
             <span class="col-md-6 text-right">Rs 500</span> 
            </label> 
           </div> 
           <div class="select-product"> 
            <label for="4unit"> 
             <span class="col-md-6"><input type="radio" name="units" id="4unit"> 4</span> 
             <span class="col-md-6 text-right">Rs 500</span> 
            </label> 
           </div> 
           <div class="select-product last"> 
            <label for="5unit"> 
             <span class="col-md-6"><input type="radio" name="units" id="5unit"> 5</span> 
             <span class="col-md-6 text-right">Rs 500</span> 
            </label> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="panel panel-warning last" id="step6" style="display:none"> 
         <div class="panel-heading">How many ACs need Gas Charging</div> 
         <div class="panel-body"> 
          <div class="col-sm-12"> 
           <div class="select-product"> 
            <label for="1unit"> 
             <span class="col-md-6"><input type="radio" name="units" id="1unit"> 1</span> 
             <span class="col-md-6 text-right">Rs 500</span> 
            </label> 
           </div> 
           <div class="select-product"> 
            <label for="2unit"> 
             <span class="col-md-6"> <input type="radio" name="units" id="2unit"> 2</span> 
             <span class="col-md-6 text-right">Rs 500</span> 
            </label> 
           </div> 
           <div class="select-product"> 
            <label for="3unit"> 
             <span class="col-md-6"><input type="radio" name="units" id="3unit"> 3</span> 
             <span class="col-md-6 text-right">Rs 500</span> 
            </label> 
           </div> 
           <div class="select-product"> 
            <label for="4unit"> 
             <span class="col-md-6"><input type="radio" name="units" id="4unit"> 4</span> 
             <span class="col-md-6 text-right">Rs 500</span> 
            </label> 
           </div> 
           <div class="select-product last"> 
            <label for="5unit"> 
             <span class="col-md-6"><input type="radio" name="units" id="5unit"> 5</span> 
             <span class="col-md-6 text-right">Rs 500</span> 
            </label> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="panel panel-warning last" id="step7" style="display:none"> 
         <div class="panel-heading">How many ACs need other reparing</div> 
         <div class="panel-body"> 
          <div class="col-sm-12"> 
           <div class="select-product"> 
            <label for="1unit"> 
             <span class="col-md-6"><input type="radio" name="units" id="1unit"> 1</span> 
             <span class="col-md-6 text-right">Rs 500</span> 
            </label> 
           </div> 
           <div class="select-product"> 
            <label for="2unit"> 
             <span class="col-md-6"> <input type="radio" name="units" id="2unit"> 2</span> 
             <span class="col-md-6 text-right">Rs 500</span> 
            </label> 
           </div> 
           <div class="select-product"> 
            <label for="3unit"> 
             <span class="col-md-6"><input type="radio" name="units" id="3unit"> 3</span> 
             <span class="col-md-6 text-right">Rs 500</span> 
            </label> 
           </div> 
           <div class="select-product"> 
            <label for="4unit"> 
             <span class="col-md-6"><input type="radio" name="units" id="4unit"> 4</span> 
             <span class="col-md-6 text-right">Rs 500</span> 
            </label> 
           </div> 
           <div class="select-product last"> 
            <label for="5unit"> 
             <span class="col-md-6"><input type="radio" name="units" id="5unit"> 5</span> 
             <span class="col-md-6 text-right">Rs 500</span> 
            </label> 
           </div> 
          </div> 
         </div> 
        </div> 

        <div class="panel-footer"> 
         <div class="col-md-6 col-sm-6 col-xs-6"> 
          <button type="submit" class="btn btn-raised btn-warning" id="prev" style="display:none;">Back</button> 
         </div> 
         <div class="col-md-6 col-sm-6 col-xs-6"> 
          <a href="javascript:;" class="btn btn-raised btn-warning pull-right" id="next">Next</a> 
          <a href="javascript:;" class="btn btn-raised btn-warning pull-right" id="booknow" style="display:none;">Book Now</a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

    <script type="text/javascript"> 
    $('#next').click(function() { 

     if ($('.current').find(':checkbox,:radio').length > 0 && !$('.current :checked').length) { 
      alert('Select one or more options to Continue') 
      return; 
     } 
     $('.current').removeClass('current').hide() 
      .next().show().addClass('current'); 
     if ($('.current').hasClass('last')) { 
      $('#next').hide(); 
      $('#booknow').show(); 
     } 
     $('#prev').show(); 
    }); 

    $('#prev').click(function() { 
     $('#booknow').hide(); 
     $('.current').removeClass('current').hide() 
      .prev().show().addClass('current'); 
     if ($('.current').hasClass('first')) { 
      $('#prev').hide(); 
     } 
     $('#next').show(); 
    }); 

</script> 
<script> 
    $('#booknow').click(function() { 
     if ($('.current').find(':checkbox,:radio').length > 0 && !$('.current :checked').length) { 
      alert('Select one or more options to Continue') 
      return; 
     } 
     window.location = "checkout.html" 
    }); 

</script> 

Answer 1

folgt können Sie prüfen, ob aktuelles Box Radioelemente und Kontrollkästchen in ihm hat, wenn ja, dann für die Dauer des geprüften Elements überprüfen. Wie folgt aus:

if($('.current').find(':checkbox,:radio').length > 0 && !$('.current :checked').length){ 
    alert('check atleast one item') 
    return; 
} 

Above Snippet muss in beiden nächsten Knopf klicken hinzugefügt werden und jetzt Schaltfläche klicken Handler buchen.

Working Demo

Answer 2

diese Hallo überprüfen u $('.current').find(':checkbox,:radio').length

https://plnkr.co/edit/98wqVnVnBMvlh1idgM94?p=preview

Answer 3

if($('.current input[type=checkbox]:checked').length) 
      { 
       //go next 
      } else 
      { 
       alert('select atleast one checkbox') 
      }