我有以下要求，在顯示下一個分區(qū)之前，必須選中至少一個復選框或單選按鈕。 完成了，但是如果用戶選擇窗口ac & amp選擇所有4項服務，然后在nxet按鈕上詢問所有選定服務的unist編號。最后顯示booknow按鈕。如果他選擇了兩種服務，那么如果他選擇了兩種服務，它會詢問兩種服務單位數(shù)量。分體式空調(diào)；然后選擇服務數(shù)量，然后詢問用戶所選服務的單位數(shù)量。分裂。
提前感謝。
我的代碼如下
<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>您可以檢查當前框中是否有單選元素和復選框，如果有，則檢查選中元素的長度。像這樣:
if( $('.current').find(':checkbox,:radio').length > 0 && !$('.current :checked').length){
alert('check atleast one item')
return;
}以上代碼片段需要添加到下一次按鈕點擊和立即預訂按鈕點擊處理程序中。
工作演示
嗨檢查這個你可以根據(jù)長度檢查 $('.當前’)。查找(':復選框，:單選')。長度
https://plnkr.co/edit/98wqVnVnBMvlh1idgM94? p =預覽
感謝貢獻一個堆棧溢出的答案！
請務必回答問題。提供詳細信息并分享您的研究！但是要避免…
尋求幫助、澄清或回應其他答案。根據(jù)意見發(fā)表聲明；用參考資料或個人經(jīng)歷來支持他們。要了解更多，請查看我們關于撰寫精彩答案的提示。
上一篇nginx部署前端vue
下一篇python 生物信息庫