如果我没有选中复选框，如何添加提醒消息？

时间：2017-07-31 07:18:01

标签： javascript c# jquery html asp.net

当我点击选择工作日/小时复选框时，如果我没有选择任何一天复选框，则会显示日期列表复选框。在这种情况下，显示的警报信息应为＆＃34; shop closed＆＃34 ; 

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

Example Image

5 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

您可以收集数组中的所有消息。

    <?php
/**
 * Show products sorted by category
 */

$taxonomy       = 'product_cat';
$orderby        = 'menu_order';
$order          = 'ASC';
$show_count     = 1; // 1 for yes, 0 for no
$pad_counts     = 0; // 1 for yes, 0 for no
$hierarchical   = 1; // 1 for yes, 0 for no
$title          = '';
$empty          = 1; // 1 for hide, 0 for show


$args = array(
    'taxonomy'      => $taxonomy,
    'orderby'       => $orderby,
    'order'         => $order,
    'show_count'    => $show_count,
    'pad_counts'    => $pad_counts,
    'hierarchical'  => $hierarchical,
    'title_li'      => $title,
    'hide_empty'    => $empty,
);




$all_categories = get_categories( $args );

foreach ($all_categories as $cat) :

    $term_link = get_term_link( $cat );

    if( $cat->category_parent == 0 ) :

        $category_id    = $cat->term_id;
        $thumbnail_id   = get_term_meta( $cat->term_id, 'thumbnail_id', true );
        $image          = wp_get_attachment_url( $thumbnail_id );

        echo '<div id="' . $cat->slug . '" class="category ' . $cat->slug . '"><h2 class="category-title"><a href="'. esc_url( $term_link ) .'">'.$cat->name.'</a></h2>';

            $product_args = array(
                'type'          => 'product',
                'post_status'   => 'publish',
                'orderby'       => 'name',
                'order'         => 'DESC',
                'pad_counts'    => false,
                'hierarchical'  => 1,
                'hide_empty'    => 0,
                'tax_query'                => array(
                    array(
                        'taxonomy' => 'product_cat',
                        'field' => 'id',
                        'terms' => $cat->term_id
                    )
                ),
            );

            $loop = new WP_Query( $product_args );

            while ( have_posts() ) : the_post();

                global $product;

                wc_get_template_part( 'content', 'product' );

            endwhile; // end of the loop. ?>

            </div><!-- end .category -->

            <?php

            wp_reset_query();

        endif;

    endforeach;

    wp_reset_query();

 ?>

如果您想要显示多个提示框，则可以循环浏览 $(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")); }); }); 。

答案 2 :(得分：0)

如果我理解正确，则在未选中时，您希望在复选框旁边显示已关闭.. 

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

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

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

答案 3 :(得分：-1)

使用prop检查是否选中了checkBox。

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

答案 4 :(得分：-1)

在你的脚本中你可以做这样的事情

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

这将为您提供具有类选项输入和已选中的所有元素。 然后你可以把你的警报包装成有条件的说.. 

if (checked.length) {
    ... alert info
} else {
    alert('shops closed!');
}
相关问题
最新问题