Jquery 在显示下一个div之前,请单击“检查”,至少应选中1个复选框

Jquery 在显示下一个div之前,请单击“检查”,至少应选中1个复选框,jquery,html,css,next,Jquery,Html,Css,Next,我有以下要求,在显示下一个div之前,必须选中至少1个复选框,否则必须选中收音机。 已完成,但如果用户选择window ac并选择所有4个服务,则nxet按钮应为所有所选服务询问unist的编号。最后booknow按钮显示。如果他选择了2项服务,则会询问两项所选服务的单位数量;如果他同时选择了窗口和拆分ac,则会询问用户窗口和拆分类型所选服务的单位数量 提前谢谢 我的代码如下 <div class="container quick-box-outer"> &

我有以下要求,在显示下一个div之前,必须选中至少1个复选框,否则必须选中收音机。 已完成,但如果用户选择window ac并选择所有4个服务,则nxet按钮应为所有所选服务询问unist的编号。最后booknow按钮显示。如果他选择了2项服务,则会询问两项所选服务的单位数量;如果他同时选择了窗口和拆分ac,则会询问用户窗口和拆分类型所选服务的单位数量

提前谢谢

我的代码如下

 <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>

我们提供的
  • 经过背景检查和培训的技术人员
  • 30天服务保证
定价
  • 安装、卸载和维修的固定费用
  • 交流维修费用将在检查时报价
  • Rs.199如果检查后没有服务可用,检查费用
你需要什么? 窗户空调 分体式空调 你想要什么样的服务? 湿式维修(不包括喷射泵维修) 干式维修 充气 其他维修 有多少空调需要湿保养? 1. 卢比500 2. 卢比500 3. 卢比500 4. 卢比500 5. 卢比500 有多少空调需要干式保养? 1. 卢比500 2. 卢比500 3. 卢比500 4. 卢比500 5. 卢比500
if( $('.current').find(':checkbox,:radio').length > 0  &&  !$('.current :checked').length){
   alert('check atleast one item')
   return;
}
   if($('.current input[type=checkbox]:checked').length)
            {
                //go next
            } else
            {
              alert('select atleast one checkbox')
            }