如果我沒有選中復選框，如何添加警報消息？

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 +'');
            });

           });

此處演示

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

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

    $(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 。

Answer 3

如果我理解正確，那么您希望在未選中復選框的情況下將其顯示為關閉。

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

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

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

Answer 4

使用道具來檢查復選框是否被選中。

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

Answer 5

在腳本中，您可以執行以下操作

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

這將為您提供所有具有option-input類並已選中的元素。 然后，您可以將警報打包為有條件的說。

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