首页 > 解决方案 > 如何计算 list.js 中当前未显示的选中复选框?

问题描述

我在 list.js 中有一个带有复选框的表。我想计算所有被选中的复选框,即使是那些由于列表的搜索功能而被隐藏的复选框。以下方法仅适用于搜索后当前显示的复选框。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Counting checked checkboxes</title>
</head>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<body>
<div id='sample_rows'>
<div id='sample_count'></div>
<input class="search" placeholder="Search" />
<table>
    <tbody class="list">
    <tr>
        <td class='name'>checkbox1</td>
        <td class="checked">
            <input class="sample_checkbox" type="checkbox" name="checkbox1" id="checkbox1" onclick="update_count()">
        </td>
    </tr>
    <tr>
        <td class='name'>checkbox2</td>
        <td class="checked">
            <input class="sample_checkbox" type="checkbox" name="checkbox2" id="checkbox2" onclick="update_count()">
        </td>
    </tr>
    </tbody>
</table>
</div>

<script>
    var list_options = {
        valueNames: ['name', 'checked'],
        searchDelay: 500
    };
    var sample_list = new List('sample_rows', list_options);
    sample_list.on('updated', update_count);
    document.addEventListener("load", update_count());
    
    function update_count(){
        let total = sample_list.size();
        let checked_count = 0;
        let items = sample_list.items;
        for (let i = 0; i < total; i++){
            let item = items[i];
            let checkbox_id = items[i]._values['name'];
            let sample_checkbox = document.getElementById(checkbox_id);
            if(sample_checkbox != null){
                if (sample_checkbox.checked){
                    checked_count += 1;
                }
            }
            else {
                alert('Cannot find state of ' + checkbox_id);
            }
        }
        document.getElementById('sample_count').innerHTML = String(checked_count) + " selected";
    }
</script>

</body>
</html>

搜索时会保留复选框的状态,因此计数应该可用。这通过以下方式说明:

  1. 选中两个复选框。计数为 2。
  2. 搜索“box2”。计数显示为 1,并提示无法计数的框。
  3. 清除搜索框。计数再次为 2,因为保留了未显示复选框的状态。

应用搜索后,如何计算所有选中的复选框?

标签: javascripthtmllist.js

解决方案


无论您的复选框是否隐藏,此代码都会使您的checked计数保持不变

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Counting checked checkboxes</title>
</head>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<body>
  <div id='sample_rows'>
    <div id='sample_count'></div>
    <input class="search" placeholder="Search" />
    <table>
      <tbody class="list">
        <tr>
          <td class='name'>checkbox1</td>
          <td class="checked">
            <input class="sample_checkbox" type="checkbox" name="checkbox1" id="checkbox1" onclick="update_count('checkbox1')">
          </td>
        </tr>
        <tr>
          <td class='name'>checkbox2</td>
          <td class="checked">
            <input class="sample_checkbox" type="checkbox" name="checkbox2" id="checkbox2" onclick="update_count('checkbox2')">
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    var checked_count = 0;
    var list_options = {
      valueNames: ['name', 'checked'],
      searchDelay: 500
    };
    var sample_list = new List('sample_rows', list_options);
    sample_list.on('updated', update_count);
    document.addEventListener("load", update_count_on_load());

    function update_count_on_load() {
      let total = sample_list.size();
      let checked_count = 0;
      let items = sample_list.items;
      for (let i = 0; i < total; i++) {
        let item = items[i];
        let checkbox_id = items[i]._values['name'];
        let sample_checkbox = document.getElementById(checkbox_id);
        if (sample_checkbox != null) {
          if (sample_checkbox.checked) {
            checked_count += 1;
          }
        } else {
          alert('Cannot find state of ' + checkbox_id);
        }
      }
      document.getElementById('sample_count').innerHTML = String(checked_count) + " selected";
    }

    function update_count(checkbox_id) {
      let sample_checkbox = document.getElementById(checkbox_id);
      if (sample_checkbox) {
        if (sample_checkbox.checked) {
          checked_count += 1;
        } else {
          checked_count -= 1;
        }
      }
      document.getElementById('sample_count').innerHTML = checked_count + " selected";
    }
  </script>

</body>

</html>


推荐阅读