带有全选的多个复选框答案

【问题标题】：Multiple Checkboxes with Select All带有全选的多个复选框
【发布时间】：2017-06-19 08:10:49
【问题描述】：

我修改了现有的fiddle 以获得具有选择/取消选择功能的多个复选框的综合解决方案。现在，它计算选中了多少个复选框，并且还给出了选中了哪些复选框。看起来它工作正常，但有一些问题需要修复，需要进一步改进：

当您先勾选选项A，然后点击“全选”复选框时，系统无法正常工作。
整个代码看起来有点长。我认为我们可以通过某种方式缩短代码，但我不知道如何。
当我们手动检查所有选项时，应自动选中 firstgroup 复选框，否则当未选中任何选项时，应自动取消选中 firstgroup 复选框。相应地，div 的内容应该改变。

感谢您的任何贡献。

<div style="margin-left: 20px;">
<input type="checkbox" id="firstgroup" /> Select All<br>
<input type="checkbox" class="order" id="first" /> A<br>
<input type="checkbox" class="order" id="second" /> B<br>
<input type="checkbox" class="order" id="third" /> C
</div>
<div id="result"></div>
<div id="form">Lorem ipsum</div>

    x = document.getElementById("result");
    y = document.getElementById("form");
    x.innerHTML = '';
    y.innerHTML = '';

$("#firstgroup").click(function() {
    var checkBoxes = $("input[type='checkbox'].order");
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
});


$("input[type='checkbox'].order").change(function() {
    var check       = $("input[type='checkbox'].order:checked").length;
var tnocb = $("input[type='checkbox'].order").length;
    var classes = $("input[type='checkbox'].order:checked").map(function() {
    return this.id;
}).get().join(", ");

if(check > 0) {
    if(check == 1) {
        x.innerHTML = 'Checked Checkbox: ' + classes + '<br>Total number of checked checkbox: ' + check;
    } else if(check == tnocb) {
        x.innerHTML = 'all of them are checked';
    } else {
        x.innerHTML = 'Checked Checkboxes: ' + classes + '<br>Total number of checked checkboxes: ' + check;
    }
    y.style.display = 'block';
    } else {
        x.innerHTML = '';
        y.style.display = 'none';
    }
    return false;
});

【问题讨论】：

嗯，有点不清楚你真正想要什么，但看看jsfiddle.net/LUtJF/35
亲爱的卡斯滕，感谢您的回复。它运作良好。也许，为了进一步改进系统，我们可以添加另一个功能，例如当我们手动检查所有选项时，系统应该自动检查 firstgroup 复选框。我们怎么能做到这一点？现在，当手动检查所有选项时，它不会自动检查 firstgroup 复选框。
类似地，当我们选中 firstgroup 复选框并手动取消选中某些选项时，firstgroup 复选框仍处于选中状态。这是另一个需要修复的项目。

标签： javascript jquery checkbox

【解决方案1】：

$("#firstgroup").click(function() {
  $('#form').text('');
  $('#result').text('');
  $('input:checkbox').not(this).prop('checked', this.checked);
  if ($(".order:checked").length == 3) {
    $('#form').text('all of them are checked');
  }
});
$(".order").on('click', function() {
  var selectedItems = '';
  $('#result').text('');
  $('#form').text('');
  if ($(".order:checked").length == 3) {
    $('#form').text('all of them are checked');
    $("#firstgroup").prop('checked','checked');
  } else if ($(".order:checked").length > 0) {
    $("#firstgroup").prop('checked','');
    $(".order:checked").each(function(i, d) {
      selectedItems += d.id + ',';
    });
    $('#result').text('Checked Checkboxes: ' + selectedItems.substring(0, selectedItems.length - 1));
    $('#form').text('Total number of checked checkboxes: ' + $(".order:checked").length);
  }
});

<div style="margin-left: 20px;">
  <input type="checkbox" id="firstgroup" /> Select All<br>
  <input type="checkbox" class="order" id="first" /> A<br>
  <input type="checkbox" class="order" id="second" /> B<br>
  <input type="checkbox" class="order" id="third" /> C
</div>
<div id="result"></div>
<div id="form"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

【讨论】：

亲爱的 Kapila，这项工作完美无缺，非常感谢。
亲爱的 Kapila，为了进一步改进这一点，我们需要改变什么来实现这一点：在我们手动检查所有选项后，然后取消选中其中任何一个，全选选项也应该是未经检查。我们应该怎么做？有什么想法吗？
很高兴它对您有所帮助。取消选中任何复选框时，您需要设置 $("#firstgroup").prop('checked','');在代码中。请找到修改后的代码。

【解决方案2】：

第一期

$("#firstgroup").click(function() {
  var checkBoxes = $("input[type='checkbox'].order");
  checkBoxes.prop("checked", $("#firstgroup").prop("checked"));
});

我无法解决的第二个问题。

【讨论】：

第一次，在我们选中选项A然后选中firstgroup复选框后，信息div并没有说所有复选框都被选中。

【解决方案3】：

$("#firstgroup").click(function () {
    if ($("#firstgroup[type='checkbox']:checked"));
    {
        $("#firstgroup").siblings("input[type='checkbox']").prop('checked', true);
    }
});

也许对你有帮助。

【讨论】：

【解决方案4】：

<div style="margin-left: 20px;">
<input type="checkbox" id="firstgroup" /> Select All<br>
<input type="checkbox" class="order" id="first" /> A<br>
<input type="checkbox" class="order" id="second" /> B<br>
<input type="checkbox" class="order" id="third" /> C
</div>
<div id="result"></div>
<div id="form">Lorem ipsum</div>
<script type="text/javascript">
    x = document.getElementById("result");
    y = document.getElementById("form");
    x.innerHTML = '';
    y.innerHTML = '';

$("#firstgroup").click(function() {
    var checkBoxes = $("input[type='checkbox'].order");
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    $('.order').not(this).prop('checked', this.checked);  //it will check and uncheck all checkbox
});


$("input[type='checkbox'].order").change(function() {
    var check       = $("input[type='checkbox'].order:checked").length;
var tnocb = $("input[type='checkbox'].order").length;
    var classes = $("input[type='checkbox'].order:checked").map(function() {
    return this.id;
}).get().join(", ");

if(check > 0) {
    if(check == 1) {
        x.innerHTML = 'Checked Checkbox: ' + classes + '<br>Total number of checked checkbox: ' + check;
    } else if(check == tnocb) {
        x.innerHTML = 'all of them are checked';
    } else {
        x.innerHTML = 'Checked Checkboxes: ' + classes + '<br>Total number of checked checkboxes: ' + check;
    }
    y.style.display = 'block';
    } else {
        x.innerHTML = '';
        y.style.display = 'none';
    }
    return false;
});
</script>

【讨论】：

对您所做的事情及其对运营的帮助发表评论总是一个好主意
亲爱的 Chandrika，感谢您的回复。当我尝试您的代码时，我在“全选”复选框上方看到一条类似“});//]]>”的文本！！！

【解决方案5】：

我用 Select All 的代码更新了多个复选框：http://jsfiddle.net/LUtJF/42/
现在，你可以

获取选中复选框的数量
获取选中复选框的标签
选中所有复选框时收到消息
当您选中所有复选框时，“全选”复选框也会自动选中，反之亦然。
系统响应。每当您添加新选项时，无需更改任何代码。

感谢您的所有贡献，并希望您会发现这个最新版本很有用。艾哈迈德·阿尔杜克 www.ahmath.com

<div style="margin-left: 20px;">
  <input type="checkbox" id="firstgroup" /> Select All<br>
  <input type="checkbox" class="order" id="first" /> A<br>
  <input type="checkbox" class="order" id="second" /> B<br>
  <input type="checkbox" class="order" id="third" /> C<br>
  <input type="checkbox" class="order" id="forth" /> D
</div>
<div id="result"></div>
<div id="form"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

$("#firstgroup").click(function() {
  $('#form').text('');
  $('#result').text('');
  $('input:checkbox').not(this).prop('checked', this.checked);
  if($(".order:checked").length == $(".order").length) {
        $('#form').text('all of them are checked');
  }
});
$(".order").on('click', function() {
  var selectedItems = '';
  $('#result').text('');
  $('#form').text('');
  if ($(".order:checked").length == $(".order").length) {
    $('#firstgroup').prop('checked', true);
    $('#form').text('all of them are checked');
  } else if ($(".order:checked").length > 0) {
    $('#firstgroup').prop('checked', false);
    $(".order:checked").each(function(i, d) {
      selectedItems += d.id + ',';
    });
    $('#result').text('Checked Checkboxes: ' + selectedItems.substring(0, selectedItems.length - 1));
    $('#form').text('Total number of checked checkboxes: ' + $(".order:checked").length);
  }
});

【讨论】：