【发布时间】：2016-11-17 05:16:37
【问题描述】：
我有以下要求，在显示下一个 div 之前必须检查至少 1 个复选框，否则必须检查单选。 完成了，但是，如果用户选择窗口 ac 并选择所有 4 项服务，则应在 nxet 按钮上询问所有选定服务的 no of 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>
【问题讨论】：