从表格javascript中选择多个复选框

时间:2017-06-14 02:26:48

标签: javascript jquery html css html-table

这里的第一个问题和新手程序员,我会尽量保持简单和重点。

在我的HTML代码中,我有一个由数百行组成的表格,每个行旁边都有一个复选框,因此用户可以选择'他们想要哪条线。我需要它,所以如果用户选择线,让我们说第300行和第400行(任意数字),将检查所有行300-400。我不太确定如何做到这一点,我的同事说这是可能的,任何帮助将不胜感激。谢谢你们。

3 个答案:

答案 0 :(得分:2)

由于你的问题缺乏细节,我能给出的唯一答案是创建一个JavaScript变量来存储第一个和第二个复选框索引,然后执行一个循环来检查它们之间的所有框。

答案 1 :(得分:0)

var checkbox = $("#wrap input[type='checkbox']");
checkbox.click(function() {
  var first = $("#wrap input[type='checkbox']:checked").first().parent().index(),
    last = $("#wrap input[type='checkbox']:checked").last().parent().index(),
    length = checkbox.length;
  for (var i = 0; i < length; i++) {
    if (i >= first && i <= last)
      checkbox[i].checked = true;
    else
      checkbox[i].checked = false;
  }
});
span {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <span>Row <input type="checkbox" name='test'></span>
  <span>Row <input type="checkbox" name='test'></span>
  <span>Row <input type="checkbox" name='test'></span>
  <span>Row <input type="checkbox" name='test'></span>
  <span>Row <input type="checkbox" name='test'></span>
  <span>Row <input type="checkbox" name='test'></span>
  <span>Row <input type="checkbox" name='test'></span>
  <span>Row <input type="checkbox" name='test'></span>
  <span>Row <input type="checkbox" name='test'></span>
  <span>Row <input type="checkbox" name='test'></span>
  <span>Row <input type="checkbox" name='test'></span>
  <span>Row <input type="checkbox" name='test'></span>
  <span>Row <input type="checkbox" name='test'></span>
  <span>Row <input type="checkbox" name='test'></span>
  <span>Row <input type="checkbox" name='test'></span>
  <span>Row <input type="checkbox" name='test'></span>
  <span>Row <input type="checkbox" name='test'></span>
</div>

答案 2 :(得分:-1)

我建议使用无线电而不是复选框。然后告诉JavaScript是否检查了2个无线电以获取这些线路的数量,然后检查该范围之间的每个无线电。