Question

假设我在HTML中有两个复选框列表控件-每个控件只是一个带边框的div，其中包含多个复选框。

<div id='divcblResponseVersionInstances1' class='CheckboxList'>

<input  type='checkbox'  ID='chkcblResponseVersionInstances__80' value='MAR3003' class = 'bcscheckbox'   />
<input  type='checkbox'  ID='chkcblResponseVersionInstances__81' value='MAR3004' class = 'bcscheckbox'   />
...
<input  type='checkbox'  ID='chkcblResponseVersionInstances__96' checked='checked' value='MBS3004' class = 'bcscheckbox'   />
...
</div>

<div id='divcblResponseVersionInstances2' class='CheckboxList'>

<input  type='checkbox'  ID='chkcblResponseVersionInstances__2_80' value='MAR3003' class = 'bcscheckbox'   />
<input  type='checkbox'  ID='chkcblResponseVersionInstances__2_81' value='MAR3004' class = 'bcscheckbox'   />
...
<input  type='checkbox'  ID='chkcblResponseVersionInstances__2_245' checked='checked' value='MES3015' class = 'bcscheckbox'   />
...
</div>

在每种情况下，复选框的数量都超过了div中可显示的高度，因此可以使用CSS使div滚动。我希望页面刷新时，每个列表中的第一个选定复选框在div中可见。当只有一个复选框列表时，可以通过添加锚标记来执行此操作。但是我只能在页面上玩一次该卡。那么，如果页面上有多个这样的div，有什么方法可以控制哪些复选框显示在div的可用空间中？

使用多选列表框会更好吗？来自w3schools的建议说：“由于执行此操作的方法不同，并且由于必须通知用户可以进行多项选择，因此使用复选框更方便用户使用。” https://www.w3schools.com/tags/att_select_multiple.asp

是否有JQuery替代品-本文dropdown checkbox list html建议JQuery具有更大范围的控件，尽管我的理解是它们最终是由HTML构建的，因此，如果JQuery提供了解决方案，则应该可以实现它不需要JQuery。

Answer 1

我根本不了解两个javascript函数-offsetTop和scrollTop

var box = document.getElementById('scrollbox');

var firstSelected = box.querySelector("input[type='checkbox']:checked");

if (firstSelected) {
  // If one was checked, get its top value
  var top = firstSelected.offsetTop;

  // Now scroll the box to the value of this top box
  // May need to tweak value of top depending on spacing
  box.scrollTop = top;
}

这里的解决方案https://codepen.io/Martyr2/pen/dwyypN

归功于道者

在多个HTML复选框列表中显示所选项目

1 个答案: