显示/隐藏选定复选框的大小和连续天数的Div

Question

下面的js显示了一个div，它基于vselected复选框的数量（大小），并且工作正常。复选框本身是连续日期。我需要的是确保所选日期是连续的 - 即07 / 04,07 / 05,07 / 06 e.t.c.如果日期不是连续的顺序，那么div不会显示（显示）。

$('input[type=checkbox]').change(function(){
   if($('input:checked').size() > 4){
     $("#hideocrp").show();   
   }
   else {
     $('#hideocrp').hide()   
   }
});

Answer 1

您可以使用以下代码来实现目标：

var start = false;
var checkstart = false;
$('#hideocrp').hide();
$('input[type=checkbox]').change(function () {
  checkstart = false;
  start = false;
  $('input[type=checkbox]').each(function () {
    if ($(this).is(":checked")) {
      var index = $(this).index("input[type=checkbox]");
      if (start == false) {
        start = index + 1;
      }
      if (index == start - 1) {
        start = start + 1;
        checkstart++;
      } else {
        checkstart = false;
        return false;
      }
    }
  });
  if (checkstart > 3) {
    $("#hideocrp").show();
  } else {
    $('#hideocrp').hide();
  }
});

Live demo | Demo source

修改 尝试使用此代码轻松搜索连续的复选框匹配。

var start = false;
var checkstart = false;
$('#hideocrp').hide();
$('input[type=checkbox]').change(function () {
  checkstart = 0;
  start = false;
  $('input[type=checkbox]').each(function () {
    if ($(this).is(":checked")) {
      var index = $(this).index("input[type=checkbox]");
      if (index == 0) {
        start = index+1;
      }
      if (index == start+1) {
        start = start + 1;
        checkstart++;
      } else {
        if (checkstart < 4) {
          checkstart = 1;
          start = index;
        } else {
          return false;
        }
      }
    }
  });
  if (checkstart > 3) {
    $("#hideocrp").show();
  } else {
    $('#hideocrp').hide();
  }
});

Live demo | Demo source

<强> EDIT2：

要解决第二个问题，请使用

$(document).ready(function() {
  $('input[type=checkbox]').trigger("change");
});

Demo | Source

To test against