时间戳

首页 > 解决方案 > Jquery 使复选框选中其他复选框删除

javascript - Jquery 使复选框选中其他复选框删除

问题描述

我正在尝试制作一个过滤器来输出一些过滤后的结果。输出到一个数组。我有四个复选框。我几乎能够达到我想要的结果。All Levels但是，当没有选择时，我想再次选中该复选框。这是我目前所拥有的。我是 jquery 的新手，所以我的代码一定效率不高。如果有人可以建议或改进我的代码以达到完全相同的结果，那也太好了！谢谢！

在此处输入图像描述

HTML

<div id="course-levels" class="list-group">
   <input type="checkbox" value="all-levels" id="all-levels">
   <input type="checkbox" value="degree" class="group">
   <input type="checkbox" value="pgd" class="group">
   <input type="checkbox" value="hnd" class="group">
</div>

jQuery

<script>

$(document).ready(function(){

// get reference to input elements
var inp = document.getElementsByTagName('input');
var levels = [];

    // if checkboxes under 'group' class is not checked
    if ($('input.group').prop('checked') == false) {
        // make #all-levels default selected checkbox
        $('#all-levels').prop('checked', true);
        // make it readonly
        $("#all-levels").attr('disabled', true);

        // get other input values to levels array
        for (var i=0; i < inp.length; i++) {
            // skip default checkbox value
            if (inp[i].value == 'all-levels') {
                continue;
            }
            levels.push(inp[i].value);
        }
        console.log(levels);
    }

    // if user checked any other checkbox now
    $('input.group').on('click', function () {
        // remove check from default checkbox
        $('#all-levels').prop('checked', false);
        // make it enabled
        $('#all-levels').removeAttr('disabled');

        // get new values to levels array
        levels = $('#course-levels input:checked').not($('#all-levels')).map(function () {
            return this.value;
        }).get();
        console.log(levels);
        }).eq(0).change();

    // if all levels checkbox is clicked again
    $('#all-levels').on('click', function(){
        $('input.group').prop('checked', false);

        // make default checkbox readonly so it will stay default
        $('#all-levels').attr('disabled', true);

        // make array empty
        levels = [];
        // get all input values to levels array
        for (var i=0; i < inp.length; i++) {
            // skip default checkbox value
            if (inp[i].value == 'all-levels') {
                continue;
            }
            levels.push(inp[i].value);
        }
        console.log(levels);

    });

});

</script>

标签： javascriptjquery

解决方案

您可以简单地通过检查所有.group复选框长度是否与选中的复选框长度相同.group并基于该 make#all-levels再次选中来做到这一点，例如：

$('#all-levels').prop('checked', $('input.group').length === $('input.group:checked').length);


$(document).ready(function() {

  // get reference to input elements
  var inp = document.getElementsByTagName('input');
  var levels = [];

  // if checkboxes under 'group' class is not checked
  if ($('input.group').prop('checked') == false) {
    // make #all-levels default selected checkbox
    $('#all-levels').prop('checked', true);
    // make it readonly
    $("#all-levels").attr('disabled', true);

    // get other input values to levels array
    for (var i = 0; i < inp.length; i++) {
      // skip default checkbox value
      if (inp[i].value == 'all-levels') {
        continue;
      }
      levels.push(inp[i].value);
    }
    console.log(levels);
  }

  // if user checked any other checkbox now
  $('input.group').on('click', function() {
    // remove check from default checkbox
    $('#all-levels').prop('checked', false);
    // make it enabled
    $('#all-levels').removeAttr('disabled');

    // get new values to levels array
    levels = $('#course-levels input:checked').not($('#all-levels')).map(function() {
      return this.value;
    }).get();
    //console.log(levels);
    
    $('#all-levels').prop('checked', $('input.group').length === $('input.group:checked').length);
  }).eq(0).change();

  // if all levels checkbox is clicked again
  $('#all-levels').on('click', function() {
    $('input.group').prop('checked', false);

    // make default checkbox readonly so it will stay default
    $('#all-levels').attr('disabled', true);

    // make array empty
    levels = [];
    // get all input values to levels array
    for (var i = 0; i < inp.length; i++) {
      // skip default checkbox value
      if (inp[i].value == 'all-levels') {
        continue;
      }
      levels.push(inp[i].value);
    }
    console.log(levels);

  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="course-levels" class="list-group">
  <input type="checkbox" value="all-levels" id="all-levels">
  <input type="checkbox" value="degree" class="group">
  <input type="checkbox" value="pgd" class="group">
  <input type="checkbox" value="hnd" class="group">
</div>

推荐阅读