我想在文本框中显示下拉复选框的选择计数，如何做到这一点？
$(':checkbox').change(function() {
$("input[type='text'"]).val("All fruits")
});<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="66040909121512140716265348544855" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42202d2d36313630233202776c706c71" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="dropdown">
<input type="text" class="form-control dropdown-toggle" data-bs-toggle="dropdown" value="2 Fruits selected" aria-expanded="false" data-bs-auto-close="outside" readonly>
<div class="dropdown-menu p-0">
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit1 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit2 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit3 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit4 </label>
</div>
</div>
</div>
</body>
</html>最佳答案
在 change 监听器中，使用 checked 伪类获取选中的复选框的数量。然后，只需比较所选元素列表的长度:
const totalLength = $('input[type="checkbox"]').length
$(':checkbox').change(function() {
const checked = $('input[type="checkbox"]:checked').length
$("input[type='text']").val(checked == totalLength ? "All fruits" : `${checked} Fruits selected`)
});<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8bab7b7acabacaab9a898edf6eaf6eb" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71131e1e05020503100131445f435f42" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="dropdown">
<input type="text" class="form-control dropdown-toggle" data-bs-toggle="dropdown" value="2 Fruits selected" aria-expanded="false" data-bs-auto-close="outside" readonly>
<div class="dropdown-menu p-0">
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit1 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit2 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit3 </label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value=""> Fruit4 </label>
</div>
</div>
</div>
</body>
</html>关于javascript - 在文本框中显示下拉复选框中的选择计数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74793372/