Question

我修改了现有的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;
});

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

第一个问题

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

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

Answer 3

<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>

Answer 4

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

也许对你有所帮助。

Answer 5

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

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

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

JSONResponse

多个复选框，全选

5 个答案: