如何在未選中複選框的情況下添加提醒消息？

Question

當我點擊選擇工作日/小時複選框天覆選框將被顯示的列表中，如果我沒有選擇任何顯示的情況下，警報消息當天複選框的應該是「shop closed」

$(document).ready(function() { 
      $("#btnCheckdays").click(function(){ 
      var ChkSUN = $('#ChkSUN:checked').val(); 
      var ChkMON = $('#ChkMON:checked').val(); 

      var SunStart = $("#ddlSunStart option:selected").val(); 
      var SunEnd = $("#ddlSunEnd option:selected").val(); 
      var MonStart = $("#ddlMonStart option:selected").val(); 
      var MonEnd = $("#ddlMonEnd option:selected").val(); 

      alert('Day ' + ChkSUN + ' Start Time is :'+ SunStart +' End Time is :'+ SunEnd +''); 
      alert('Day ' + ChkMON + ' Start Time is :'+ MonStart +' End Time is :'+ MonEnd +''); 
      }); 

      }); 

DEMO HERE

Answer 1

你應該使用$('#ChkSUN').is(":checked")看如果任一複選框被檢查或不：

$('#addweekhours').click(function() { 
 
    $('#showweekhours').slideToggle("fast"); 
 
}); 
 
$('.sun').click(function() { 
 
    $('#Sun').slideToggle("fast"); 
 
}); 
 
$('.mon').click(function() { 
 
    $('#Mon').slideToggle("fast"); 
 
}); 
 

 
$(document).ready(function() { 
 
    $("#btnCheckdays").click(function() { 
 
    var ChkSUN = $('#ChkSUN:checked').val(); 
 
    var ChkMON = $('#ChkMON:checked').val(); 
 
    if ($('#ChkSUN').is(":checked") || ($('#ChkMON').is(":checked"))) { 
 
     var SunStart = $("#ddlSunStart option:selected").val(); 
 
     var SunEnd = $("#ddlSunEnd option:selected").val(); 
 
     var MonStart = $("#ddlMonStart option:selected").val(); 
 
     var MonEnd = $("#ddlMonEnd option:selected").val(); 
 

 
     alert('Day ' + ChkSUN + ' Start Time is :' + SunStart + ' End Time is :' + SunEnd + ''); 
 
     alert('Day ' + ChkMON + ' Start Time is :' + MonStart + ' End Time is :' + MonEnd + ''); 
 
    } else { 
 
     alert("Shop closed."); 
 
    } 
 

 
    }); 
 

 
});

.option-input { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    -ms-appearance: none; 
 
    -o-appearance: none; 
 
    appearance: none; 
 
    position: relative; 
 
    top: 13.33333px; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    height: 30px; 
 
    width: 30px; 
 
    transition: all 0.15s ease-out 0s; 
 
    background: #cbd1d8; 
 
    border: none; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    margin-right: 0.5rem; 
 
    outline: none; 
 
    position: relative; 
 
    z-index: 1000; 
 
} 
 

 
.option-input:hover { 
 
    background: #9faab7; 
 
} 
 

 
.option-input:checked { 
 
    background: #40e0d0; 
 
} 
 

 
.option-input:checked::before { 
 
    height: 30px; 
 
    width: 30px; 
 
    position: absolute; 
 
    content: '✔'; 
 
    display: inline-block; 
 
    font-size: 16.66667px; 
 
    text-align: center; 
 
    line-height: 30px; 
 
} 
 

 
.option-input:checked::after { 
 
    -webkit-animation: click-wave 0.65s; 
 
    -moz-animation: click-wave 0.65s; 
 
    animation: click-wave 0.65s; 
 
    background: #40e0d0; 
 
    content: ''; 
 
    display: block; 
 
    position: relative; 
 
    z-index: 100; 
 
} 
 

 
.option-input.radio { 
 
    border-radius: 50%; 
 
} 
 

 
.option-input.radio::after { 
 
    border-radius: 50%; 
 
} 
 

 
select, 
 
.form-control, 
 
textarea, 
 
input[type="text"], 
 
input[type="password"], 
 
input[type="datetime"], 
 
input[type="datetime-local"], 
 
input[type="date"], 
 
input[type="month"], 
 
input[type="time"], 
 
input[type="week"], 
 
input[type="number"], 
 
input[type="email"], 
 
input[type="url"], 
 
input[type="search"], 
 
input[type="tel"], 
 
input[type="color"], 
 
.uneditable-input { 
 
    color: #999; 
 
    width: 100%; 
 
    height: 40px; 
 
    outline: none; 
 
    background: #fff; 
 
    font-size: 14px; 
 
    font-weight: 400; 
 
    line-height: 18px; 
 
    padding: 10px 15px; 
 
    box-shadow: none; 
 
    border-radius: 0; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    border: 1px solid #ddd; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tg-formsection"> 
 
    <div class="tg-heading-border tg-small"> 
 
    <h3>Add Clinic Business Hours</h3> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12"> 
 
     <div class="tg-docschedule tg-haslayout"> 
 
     <form class="form-docschedule" method="POST"> 
 
      <fieldset class="row"> 
 
      <div class="col-sm-12 col-xs-12"> 
 
       <div class="form-group"> 
 
       <label><h4>Business Hours:</h4></label>&nbsp;&nbsp;&nbsp;&nbsp; 
 
       <label> 
 
<input type="radio" id="fullhours" class="option-input radio" /> 
 
<span style="font-size:20px;">24 hours x 7 days</span> 
 

 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="addweekhours" class="option-input radio" /> 
 
<span style="font-size:20px">Select working days/hours</span> 
 
</label> 
 
       </div> 
 
      </div> 
 
      <div id="showweekhours" style="display:none;"> 
 
       <div class="col-sm-12 col-xs-12"> 
 
       <div class="form-group"> 
 
        <input id="ChkSUN" type="checkbox" value="Sunday" runat="server" class="single sun option-input checkbox" name="days" /><span class="sun" style="font-size:20px;"> Sunday</span> 
 
       </div> 
 
       </div> 
 
       <div id="Sun" style="display:none;"> 
 
       <div class="col-md-5 col-sm-6 col-xs-12"> 
 
        <div class="form-group"> 
 
        <select ID="ddlSunStart" runat="server" class="form-control"> 
 
<option value="Satrt">Starts at</option> 
 
<option value="1:00">1:00</option> 
 
<option value="1:30">1:30</option> 
 
<option value="2:00">2:00</option> 
 
<option value="2:30">2:30</option> 
 
<option value="3:00">3:00</option> 
 
<option value="3:30">3:30</option> 
 
<option value="4:00">4:00</option> 
 
<option value="4:30">4:30</option> 
 
<option value="5:00">5:00</option> 
 
<option value="5:30">5:30</option> 
 
<option value="6:00">6:00</option> 
 
<option value="6:30">6:30</option> 
 
<option value="7:00">7:00</option> 
 
<option value="7:30">7:30</option> 
 
<option value="8:00" >8:00</option> 
 
<option value="8:30">8:30</option> 
 
<option value="9:00">9:00</option> 
 
<option value="9:30">9:30</option> 
 
<option value="10:00">10:00</option> 
 
<option value="10:30">10:30</option> 
 
<option value="11:00">11:00</option> 
 
<option value="11:30">11:30</option> 
 
<option value="12:00">12:00</option> 
 
<option value="12:30">12:30</option> 
 
</select> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-5 col-sm-6 col-xs-12"> 
 
        <select ID="ddlSunEnd" runat="server" class="form-control"> 
 
<option value="Close">Closes at</option> 
 
<option value="1:00">1:00</option> 
 
<option value="1:30">1:30</option> 
 
<option value="2:00">2:00</option> 
 
<option value="2:30">2:30</option> 
 
<option value="3:00">3:00</option> 
 
<option value="3:30">3:30</option> 
 
<option value="4:00">4:00</option> 
 
<option value="4:30">4:30</option> 
 
<option value="5:00">5:00</option> 
 
<option value="5:30">5:30</option> 
 
<option value="6:00">6:00</option> 
 
<option value="6:30">6:30</option> 
 
<option value="7:00">7:00</option> 
 
<option value="7:30">7:30</option> 
 
<option value="8:00" >8:00</option> 
 
<option value="8:30">8:30</option> 
 
<option value="9:00">9:00</option> 
 
<option value="9:30">9:30</option> 
 
<option value="10:00">10:00</option> 
 
<option value="10:30">10:30</option> 
 
<option value="11:00">11:00</option> 
 
<option value="11:30">11:30</option> 
 
<option value="12:00">12:00</option> 
 
<option value="12:30">12:30</option> 
 
</select> 
 
       </div> 
 
       </div> 
 
       <div class=" col-sm-12 col-xs-12"> 
 
       <div class="form-group"> 
 
        <input id="ChkMON" type="checkbox" value="Monday" runat="server" class="single mon option-input checkbox" name="days" /><span class="mon" style="font-size:20px;"> Monday</span> 
 
       </div> 
 
       </div> 
 
       <div id="Mon" style="display:none;"> 
 
       <div class="col-md-5 col-sm-6 col-xs-12"> 
 
        <div class="form-group"> 
 
        <select ID="ddlMonStart" runat="server" class="form-control"> 
 
<option value="start">Satrts at</option> 
 
<option value="1:00">1:00</option> 
 
<option value="1:30">1:30</option> 
 
<option value="2:00">2:00</option> 
 
<option value="2:30">2:30</option> 
 
<option value="3:00">3:00</option> 
 
<option value="3:30">3:30</option> 
 
<option value="4:00">4:00</option> 
 
<option value="4:30">4:30</option> 
 
<option value="5:00">5:00</option> 
 
<option value="5:30">5:30</option> 
 
<option value="6:00">6:00</option> 
 
<option value="6:30">6:30</option> 
 
<option value="7:00">7:00</option> 
 
<option value="7:30">7:30</option> 
 
<option value="8:00" >8:00</option> 
 
<option value="8:30">8:30</option> 
 
<option value="9:00">9:00</option> 
 
<option value="9:30">9:30</option> 
 
<option value="10:00">10:00</option> 
 
<option value="10:30">10:30</option> 
 
<option value="11:00">11:00</option> 
 
<option value="11:30">11:30</option> 
 
<option value="12:00">12:00</option> 
 
<option value="12:30">12:30</option> 
 
</select> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-5 col-sm-6 col-xs-12"> 
 
        <div class="form-group"> 
 
        <select ID="ddlMonEnd" runat="server" class="form-control"> 
 
<option value="Close">Close at</option> 
 
<option value="1:00">1:00</option> 
 
<option value="1:30">1:30</option> 
 
<option value="2:00">2:00</option> 
 
<option value="2:30">2:30</option> 
 
<option value="3:00">3:00</option> 
 
<option value="3:30">3:30</option> 
 
<option value="4:00">4:00</option> 
 
<option value="4:30">4:30</option> 
 
<option value="5:00">5:00</option> 
 
<option value="5:30">5:30</option> 
 
<option value="6:00">6:00</option> 
 
<option value="6:30">6:30</option> 
 
<option value="7:00">7:00</option> 
 
<option value="7:30">7:30</option> 
 
<option value="8:00" >8:00</option> 
 
<option value="8:30">8:30</option> 
 
<option value="9:00">9:00</option> 
 
<option value="9:30">9:30</option> 
 
<option value="10:00">10:00</option> 
 
<option value="10:30">10:30</option> 
 
<option value="11:00">11:00</option> 
 
<option value="11:30">11:30</option> 
 
<option value="12:00">12:00</option> 
 
<option value="12:30">12:30</option> 
 
</select> 
 
        </div> 
 
       </div> 
 
       </div> 
 

 
      </div> 
 

 
      <div class="col-sm-offset-2 col-sm-10"> 
 
       <br/> 
 
       <button type="submit" id="btnCheckdays" class="btn btn-success">update</button> 
 
      </div> 
 
      </fieldset> 
 
     </form> 
 
     </div> 
 

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

Answer 2

使用prop來檢查複選框是否被選中。

if ($ChkSUN.prop('checked')) { 
// do something 
alert('checked') 
}else{ 
// do this 
alert('not checked') 
} 

Answer 3

在腳本中，你可以做這樣的事情

var checked = $('.option-input:checked'); 

這會給你所有具有類選項，輸入和檢查的元素。 然後你可以用你的提醒在有條件的說..

if (checked.length) { 
    ... alert info 
} else { 
    alert('shops closed!'); 
} 

Answer 4

如果我理解正確，您希望在不是它選擇旁邊顯示的複選框關閉..

var $dayBoxs = $('input[name=allChkBoxname]'); 

$dayBoxs.each(function(){ 
     // Do stuff here with this 

    if($(this).is(':checked')) 
    { 
    alert("OPen"); 
    } 
    else 
    { 
    alert("CLosed"); 
    } 
}); 

Answer 5

您可以像這樣收集數組中的所有消息。

$(document).ready(function() { 
     $("#btnCheckdays").click(function(evt) { 
     var msg = []; 

     $("#showweekhours input[type=checkbox]").each(function(i, el) { 
     var day = $(el).val(); 
     var timesMsg = []; 

     // selector for select fields in div with ids #Sun, #Mon, #Tue ... 
     var daySelector = ["#showweekhours", " #", day.substring(0, 3), ' select'].join(''); 

     $(daySelector).each(function(i, sel) { 
      var $sel = $(sel); 
      var choiceTime = $sel.val(); 

      if (!["Satrt", "start", "Close", "Close at"].includes(choiceTime)) { 
       if ($sel.attr('id').endsWith("Start")) { 
       timesMsg.push(choiceTime); 
       } 

       if ($sel.attr('id').endsWith("End")) { 
       timesMsg.push(choiceTime); 
       } 
      } 
     }); 

     if (timesMsg.length == 2) { 
      msg.push(["Day", day, "Start Time is:", timesMsg[0], "End Time is:", timesMsg[1]].join(" ")); 
     } else { 
      msg.push(["Day", day, "Shop closed"].join(" ")); 
     } 
    }); 

     alert(msg.join("\n")); 

    }); 

    }); 

可以遍歷msg如果你想顯示多個警告框。