jquery - 从选中的复选框中显示/隐藏具有大小和连续天数的 Div

Question

下面的 js 显示了一个基于复选框 vselected 的数量（大小）的 div，它工作正常。复选框本身是连续的日期。我需要确保选择的日期是连续的 - 即 07/04、07/05、07/06 等 如果日期不是连续的，那么 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();
  }
});

现场演示| 演示源

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

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();
  }
});

现场演示| 演示源

编辑2：

要解决您的第二个问题，只需使用

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

演示| 来源

测试