如何在 table 中显示选中复选框的数量

Question

Array.prototype.shuffle = function() {
  let m = this.length, i;
  while (m) {
    i = (Math.random() * m--) >>> 0;
    [this[m], this[i]] = [this[i], this[m]]
  }
  return this;
}

$('#select_random').on('click', function() {
  if ($(this).prop('checked')) {
    let minnum = 3, maxnum = 6
    let rand = Math.min(maxnum, Math.floor(Math.random() * ($('.check').length - 1 - minnum)) + minnum)
    //create our keys array
    let keyArray = [...Array($('.check').length).keys()].shuffle().slice(0, rand)
    keyArray.forEach((chk_i, i) => {
      if (i < rand) $($('.check').get(chk_i)).prop('checked', true)
    })
  } else {
    $('.check').prop('checked', false);
  }
});

const selectedElm = document.getElementById('selected');

function showChecked(){
  selectedElm.innerHTML = document.querySelectorAll('input[name=check]:checked').length;
}

document.querySelectorAll("input[name=check]").forEach(i=>{
 i.onclick = () => showChecked();
});

使用此脚本 select table 中随机数量的复选框。想要显示 selected 复选框的计数。尝试了一些样本不起作用。试过这个例子，不适合我。尝试在 div 跨度区域中获得结果，如下所示。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Select Random <input type='checkbox' id="select_random"></label>
<div id="result">Total Number of Items Selected = <span id="selected">0</span></div>
 
<div class='cb'>
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />

Answer 1

下面是一个代码片段，展示了如何对选中的复选框进行计数。如果我误解了您的问题，请告知 me/us，我会更改或删除此答案

console.log(document.querySelectorAll("input:checked").length);

1<input type="checkbox" checked/>
2<input type="checkbox" checked/>
3<input type="checkbox"/>
4<input type="checkbox" checked/>

Answer 2

解决方案

let checked = $(".check:checked");

你的情况：

$(".check:checked").length // will return count of checked checkboxes;

希望有用

Answer 3

这是一种可能的解决方案

const checkboxContainer = document.querySelector('.cb');

function showChecked(){
  selectedElm.innerHTML = checkboxContainer.querySelectorAll('input[type=checkbox]:checked').length;
}

您想将搜索限制在父容器标签中，并按输入类型过滤掉。

如何在 table 中显示选中复选框的数量

How to show count of selected checkboxes in a table

html

javascript

checkbox

jquery