Javascript 带有“全选”的多个复选框

我修改了一个现有的解决方案，为多个复选框提供了选择/取消选择功能。现在，计算选中了多少复选框，并给出选中的复选框。它看起来工作正常，但有一些问题需要解决，需要进一步改进：

当您首先选中选项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;
});

选择全部

A

B

C
乱数假文
x=document.getElementById（“结果”）；
y=document.getElementById（“表单”）；
x、 innerHTML=''；
y、 innerHTML=''；
$（“#第一组”）。单击（函数（）{
var复选框=$（“输入[type='checkbox'].order”）；
复选框.prop（“选中”），！复选框.prop（“选中”）；
});
$（“输入[type='checkbox'].order”）.change（函数（）{
var check=$（“输入[type='checkbox'].order:checked”）.length；
var tnocb=$（“输入[type='checkbox'].order”）.length；
变量类=$（“输入[type='checkbox'].order:checked”）.map（函数（）{
返回此.id；
}).get（）.join（“，”）；
如果（检查>0）{
如果（检查==1）{
x、 innerHTML='选中复选框：'+classes+'
选中复选框的总数：'+check；
}否则如果（检查==tnocb）{
x、 innerHTML='所有这些都已检查'；
}否则{
x、 innerHTML='选中的复选框：'+classes+'
选中的复选框总数：'+check；
}
y、 style.display='block'；
}否则{
x、 innerHTML=''；
y、 style.display='none'；
}
返回false；
});

$（“#第一组”）。单击（函数（）{
$（'形式'）。文本（''）；
$（“#结果”）。文本（“”）；
$（'input:checkbox'）.not（this.prop（'checked'，this.checked））；
如果（$（“.order:checked”）.length==3）{
$（'#form'）.text（'全部选中'）；
}
});
$（“.order”）。在（'click'，function（）上{
var selectedItems=''；
$（“#结果”）。文本（“”）；
$（'形式'）。文本（''）；
如果（$（“.order:checked”）.length==3）{
$（'#form'）.text（'全部选中'）；
$（“#第一组”）.prop（'checked'，'checked'）；
}else if（$（“.order:已选中”）.length>0）{
$（“#第一组”）.prop（'选中'，''）；
$（“.order:checked”）。每个（函数（i，d）{
选择editems+=d.id+'，'；
});
$（'#result'）.text（'复选框：'+selectedItems.substring（0，selectedItems.length-1））；
$（'#form'）.text（'复选框总数：'+$（“.order:checked”）.length）；
}
});

选择全部

A

B

C
第一期

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

第二个问题我无法解决。

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

选择全部

A

B

C
乱数假文
x=document.getElementById（“结果”）；
y=document.getElementById（“表单”）；
x、 innerHTML=''；
y、 innerHTML=''；
$（“#第一组”）。单击（函数（）{
var复选框=$（“输入[type='checkbox'].order”）；
复选框.prop（“选中”），！复选框.prop（“选中”）；
$（'.order'）.not（this.prop（'checked'，this.checked）；//它将选中并取消选中所有复选框
});
$（“输入[type='checkbox'].order”）.change（函数（）{
var check=$（“输入[type='checkbox'].order:checked”）.length；
var tnocb=$（“输入[type='checkbox'].order”）.length；
变量类=$（“输入[type='checkbox'].order:checked”）.map（函数（）{
返回此.id；
}).get（）.join（“，”）；
如果（检查>0）{
如果（检查==1）{
x、 innerHTML='选中复选框：'+classes+'
选中复选框的总数：'+check；
}否则如果（检查==tnocb）{
x、 innerHTML='所有这些都已检查'；
}否则{
x、 innerHTML='选中的复选框：'+classes+'
选中的复选框总数：'+check；
}
y、 style.display='block'；
}否则{
x、 innerHTML=''；
y、 style.display='none'；
}
返回false；
});

可能对您有帮助。
我用全选的代码更新了多个复选框：

现在，你可以

获取选中复选框的数目
获取选中复选框的标签
选中所有复选框后获取消息
选中所有复选框时，“全选”复选框也会自动选中，反之亦然
系统响应迅速。无论何时添加新选项，都无需更改任何代码
感谢您的所有贡献，希望最后的版本对您有用。
艾哈迈特·阿杜克


选择全部

A

B

C

D
$（“#第一组”）。单击（函数（）{
$（'形式'）。文本（''）；
$（“#结果”）。文本（“”）；
$（'input:checkbox'）.not（this.prop（'checked'，this.checked））；
if（$（“.order:已选中”）.length==$（“.order”）.length）{
$（'#form'）.text（'全部选中'）；
}
});
$（“.order”）。在（'click'，function（）上{
var selectedItems=''；
$（“#结果”）。文本（“”）；
$（'形式'）。文本（''）；
if（$（“.order:已选中”）.length==$（“.order”）.length）{
$（'#firstgroup'）.prop（'checked'，true）；
$（'#form'）.text（'全部选中'）；
}else if（$（“.order:已选中”）.length>0）{
$（'#firstgroup'）.prop（'checked'，false）；
$（“.order:checked”）。每个（函数（i，d）{
选择editems+=d.id+'，'；
});
$（'#result'）.text（'复选框：'+selectedItems.substring（0，selectedItems.length-1））；
$（'#form'）.text（'复选框总数：'+$（“.order:checked”）.length）；
}
});
不太清楚你到底想要什么，但是看看亲爱的卡斯滕，谢谢你的回复。它工作得很好。也许，为了进一步改进系统，我们可以添加另一个功能，如when
$("#firstgroup").click(function () {
    if ($("#firstgroup[type='checkbox']:checked"));
    {
        $("#firstgroup").siblings("input[type='checkbox']").prop('checked', true);
    }
});

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