使用 jQuery 进行复选框过滤

Question

我需要你的帮助。

我按照一些教程使用 jQuery 创建了一个可过滤的网格。 很简单，网格包含广播节目（排放），每个节目都有一个广播日。 目标是允许访问者选择日期并显示当天的节目。

代码运行良好，但我需要进一步开发。

我添加了条件来检查日期并自动检查当前日期。 问题是当页面加载时，选择了日期但过滤器不适用。我已显示所有排放量。

我的目标是：

• 页面加载时显示当天的广播
• [BONUS]：不允许访问者取消选择所选日期。这样至少有一天选择不显示所有节目。

jQuery(function($) {
  var today = new Date();
  if (today.getDay() == 1) {
    $(".monday").attr("checked", "true");
  }
  if (today.getDay() == 2) {
    $(".tuesday").attr("checked", "true");
  }
  if (today.getDay() == 3) {
    $(".wednesday").attr("checked", "true");
  }
  if (today.getDay() == 4) {
    $(".thursday").attr("checked", "true");
  }
  if (today.getDay() == 5) {
    $(".friday").attr("checked", "true");
  }
  if (today.getDay() == 6) {
    $(".saturday").prop('checked', true);
  }
  if (today.getDay() == 7) {
    $(".sunday").attr("checked", "true");
  }
})

jQuery.expr[":"].CIcontains = jQuery.expr.createPseudo(function(arg) {
  return function(elem) {
    return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
  };
});

jQuery('.filtre-jour input[type="checkbox"]').change(function() {

  var thisID = jQuery(this).attr('id');

  jQuery('.filtre-jour input[type="checkbox"]').each(function() {
    if (jQuery(this).attr('id') != thisID) {
      jQuery(this).prop('checked', false);

    }

  })

  if (jQuery(this).is(':checked')) {
    var curr_text = jQuery(this).data('search-term');
    filterResults(curr_text);
  } else {
    filterResults('');
  }

});

function filterResults(curr_text) {
  jQuery('.emission-card').hide();
  jQuery('.emission-card:CIcontains("' + curr_text + '")').show();
}

<div class="checkboxes">
  <input id="#monday" class="monday" data-search-term="monday" type="checkbox">
  <label class="inline-checkbox" for="#monday">Lundi</label>

  <input id="#tuesday" class="tuesday" data-search-term="tuesday" type="checkbox">
  <label class="inline-checkbox" for="#tuesday">Mardi</label>

  <input id="#wednesday" class="wednesday" data-search-term="wednesday" type="checkbox">
  <label class="inline-checkbox" for="#wednesday">Mercredi</label>

  <input id="#thursday" class="thursday" data-search-term="thursday" type="checkbox">
  <label class="inline-checkbox" for="#thursday">Jeudi</label>

  <input id="#friday" class="friday" data-search-term="friday" type="checkbox">
  <label class="inline-checkbox" for="#friday">Vendredi</label>

  <input id="#saturday" class="saturday" data-search-term="saturday" type="checkbox">
  <label class="inline-checkbox" for="#saturday">Samedi</label>

  <input id="#sunday" class: "sunday" data-search-term="sunday" type="checkbox">
  <label class="inline-checkbox" for="#sunday">Dimanche</label>
</div>

Answer 1

我认为您可以通过使用复选框的索引来简化并隐藏那些最初不是今天的。这应该适用于相应的卡，但这可能比您在比较中所拥有的更简单。见第二个例子

jQuery(function($) {
  let today = new Date();
  myday = today.getDay();
  $('.day-check').eq(myday - 1).prop("checked", true);
  $('.day-card').not($('.day-card').eq(myday - 1)).hide();
})

jQuery.expr[":"].CIcontains = jQuery.expr.createPseudo(function(arg) {
  return function(elem) {
    return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
  };
});

function filterResults(curr_text) {
  jQuery('.day-card').hide();
  jQuery('.day-card:CIcontains("' + curr_text + '")').show();
}

jQuery('.filtre-jour')
  .find('input[type="checkbox"]')
  .on('change', function() {
    // var thisID = jQuery(this).attr('id');
    jQuery('.filtre-jour')
      .find('input[type="checkbox"]')
      .not(this).prop('checked', false);
    if (jQuery(this).is(':checked')) {
      let curr_text = jQuery(this).data('search-term');
      filterResults(curr_text);
    } else {
      filterResults('');
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtre-jour">
  <div class="checkboxes">
    <input id="#monday" class="day-check monday" data-search-term="monday" type="checkbox">
    <label class="inline-checkbox" for="#monday">Lundi</label>

    <input id="#tuesday" class="day-check tuesday" data-search-term="tuesday" type="checkbox">
    <label class="inline-checkbox" for="#tuesday">Mardi</label>

    <input id="#wednesday" class="day-check wednesday" data-search-term="wednesday" type="checkbox">
    <label class="inline-checkbox" for="#wednesday">Mercredi</label>

    <input id="#thursday" class="day-check thursday" data-search-term="thursday" type="checkbox">
    <label class="inline-checkbox" for="#thursday">Jeudi</label>

    <input id="#friday" class="day-check friday" data-search-term="friday" type="checkbox">
    <label class="inline-checkbox" for="#friday">Vendredi</label>

    <input id="#saturday" class="day-check saturday" data-search-term="saturday" type="checkbox">
    <label class="inline-checkbox" for="#saturday">Samedi</label>

    <input id="#sunday" class="day-check sunday" data-search-term="sunday" type="checkbox">
    <label class="inline-checkbox" for="#sunday">Dimanche</label>
  </div>
</div>
<div class="cards">
  <div class="day-card">emission-card monday</div>
  <div class="day-card">emission-card tuesday</div>
  <div class="day-card">emission-card WEDNESDAY</div>
  <div class="day-card">emission-card Thursday</div>
  <div class="day-card">emission-card friday</div>
  <div class="day-card">emission-card saturday</div>
  <div class="day-card">emission-card sunday</div>
</div>

不那么复杂

jQuery(function($) {
  let today = new Date();
  let myday = today.getDay();
  $('.day-check').eq(myday - 1).prop("checked", true);
  $('.day-card').not($('.day-card').eq(myday - 1)).hide();
   $('.day-check').prop("disabled",true);
});
/* do not need if not allow changes 
function filterResults(useDay) {
  jQuery('.day-card').hide();
  jQuery('.day-card' + useDay).show();
}

jQuery('.filtre-jour')
  .find('input[type="checkbox"]')
  .on('change', function() {
    jQuery('.filtre-jour')
      .find('input[type="checkbox"]')
      .not(this).prop('checked', false);
    let term = jQuery(this).is(':checked') ? "." + jQuery(this).data('search-term') : "";
    filterResults(term);
  });
 */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtre-jour">
  <div class="checkboxes">
    <input id="#monday" class="day-check monday" data-search-term="monday" type="checkbox">
    <label class="inline-checkbox" for="#monday">Lundi</label>

    <input id="#tuesday" class="day-check tuesday" data-search-term="tuesday" type="checkbox">
    <label class="inline-checkbox" for="#tuesday">Mardi</label>

    <input id="#wednesday" class="day-check wednesday" data-search-term="wednesday" type="checkbox">
    <label class="inline-checkbox" for="#wednesday">Mercredi</label>

    <input id="#thursday" class="day-check thursday" data-search-term="thursday" type="checkbox">
    <label class="inline-checkbox" for="#thursday">Jeudi</label>

    <input id="#friday" class="day-check friday" data-search-term="friday" type="checkbox">
    <label class="inline-checkbox" for="#friday">Vendredi</label>

    <input id="#saturday" class="day-check saturday" data-search-term="saturday" type="checkbox">
    <label class="inline-checkbox" for="#saturday">Samedi</label>

    <input id="#sunday" class="day-check sunday" data-search-term="sunday" type="checkbox">
    <label class="inline-checkbox" for="#sunday">Dimanche</label>
  </div>
</div>
<div class="cards">
  <div class="day-card monday">Happy monday</div>
  <div class="day-card tuesday">Happy tuesday</div>
  <div class="day-card wednesday">Happy WEDNESDAY</div>
  <div class="day-card thursday">Happy Thursday</div>
  <div class="day-card friday">Happy friday</div>
  <div class="day-card saturday">Happy saturday</div>
  <div class="day-card sunday">Happy sunday</div>
</div>