javascript - display error when no option is selected from select box -

i facing 1 problem, want show error when user has not selected service selectbox. have 2 checkboxes of nails , hair, when user selects nails checkbox then, user must have select service selectbox. if user not select hair checkbox then, selectbox not mandatory below hair. if both checked , both below service must selected span serror message. here html:-

enter code here <div class="one-row"> <div class="div_img_part-2">     <span class="img_part_class-2"><img src="http://localhost:8000/images/serviceimages/48031.png">     </span>     <span class="text_part_class-2">         <p class="custom-checkbox firstpart">             <input class="firstdisable" type="checkbox" id="0" name="services[]" value="1">             <label for="0">nails</label>         </p>     </span>     <select id="checkselect-0" name="service_type[nails]" class="selectpicker" style="display: none;">         <option value="">select service</option>         <option value="salon">salon</option>         <option value="mobile beautician">mobile beautician</option>         <option value="both">both</option>     </select>     <div class="btn-group bootstrap-select">         <button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="checkselect-0" title="select service"><span class="filter-option pull-left">select service</span>&nbsp;<span class="caret"></span></button>         <div class="dropdown-menu open">             <ul class="dropdown-menu inner selectpicker" role="menu">                 <li rel="0" class="selected"><a tabindex="0" class="" style=""><span class="text">select service</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>                 <li rel="1"><a tabindex="0" class="" style=""><span class="text">salon</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>                 <li rel="2"><a tabindex="0" class="" style=""><span class="text">mobile beautician</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>                 <li rel="3"><a tabindex="0" class="" style=""><span class="text">both</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>             </ul>         </div>     </div>     <span id="serviceerror-0" style="color: rgb(169, 68, 66);">please select service</span> </div> <div class="div_img_part-2">     <span class="img_part_class-2"><img src="http://localhost:8000/images/serviceimages/55643.png">     </span>     <span class="text_part_class-2">         <p class="custom-checkbox firstpart">             <input class="firstdisable" type="checkbox" id="1" name="services[]" value="2">             <label for="1">hair</label>         </p>     </span>     <select id="checkselect-1" name="service_type[hair]" class="selectpicker" style="display: none;">         <option value="">select service</option>         <option value="salon">salon</option>         <option value="mobile beautician">mobile beautician</option>         <option value="both">both</option>     </select>     <div class="btn-group bootstrap-select dropup">         <button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="checkselect-1" title="salon" aria-expanded="false"><span class="filter-option pull-left">salon</span>&nbsp;<span class="caret"></span></button>         <div class="dropdown-menu open" style="max-height: 519.375px; overflow: hidden; min-height: 92px;">             <ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 507.375px; overflow-y: auto; min-height: 80px;">                 <li rel="0" class=""><a tabindex="0" class="" style=""><span class="text">select service</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>                 <li rel="1" class="selected"><a tabindex="0" class="" style=""><span class="text">salon</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>                 <li rel="2"><a tabindex="0" class="" style=""><span class="text">mobile beautician</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>                 <li rel="3"><a tabindex="0" class="" style=""><span class="text">both</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>             </ul>         </div>     </div>     <span id="serviceerror-1" style="color:#a94442; display:none;">please select service</span> </div> 

image:-

now see every category having own selectbox here jquery code :-

$("#checkservice").on('click',function() { // click event on submit button     var n = $( "input:checked" ).length; //     if(n == 0) {         alert("please select atleast 1 service"); return false;     }      (var = 0; <= 1; i++) {         if ($('#'+i).is(":checked")) {             if ($("#checkselect-"+i).val() === "") {                 $("#serviceerror-"+i).show();                 return false;             }                      }     } }); 

this jquery code works first checkbox when select nails , not select service show error when select hair checkbox not showing error

image:-

i using laravel framework. please me

function onsubmit()   {     var fields = $("input[name='list']").serializearray();     if (fields.length == 0)     {       alert('nothing selected');       // cancel submit      return false;    }     else     {       alert(fields.length + " items selected");     }  }    // register event on form, not submit button  $('#subscribeform').submit(onsubmit)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <form method="post" id="subscribeform">      <fieldset id="cbgroup">          <div><input name="list" id="list0" type="checkbox"  value="newsletter0" >zero</div>          <div><input name="list" id="list1" type="checkbox"  value="newsletter1" >one</div>          <div><input name="list" id="list2" type="checkbox"  value="newsletter2" >two</div>      </fieldset>      <input name="submit" type="submit"  value="submit">  </form>