html 从下拉式核取方块显示文字方块中的选取项目计数

hfsqlsce 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(150)

我想显示选择计数的文本框从下拉复选框，这是如何做到的？

$(':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/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/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>

Html

来源：https://stackoverflow.com/questions/74793372/display-selections-count-in-textbox-from-dropdown-checkboxes

1条答案

按热度按时间

vs3odd8k1#

在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/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/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>

赞(0）回复(0）举报 2022-12-16

我来回答

html 从下拉式核取方块显示文字方块中的选取项目计数

1条答案

相关问题

热门标签

最新问答