отображение выбранного элемента в нескольких списках флажков HTML - PullRequest
Новая
       8

отображение выбранного элемента в нескольких списках флажков HTML

0 голосов
/ 06 декабря 2018

Предположим, у меня есть два элемента управления checkboxlist в 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 для их отображения, поэтому div можно прокручивать с помощью CSS.Я хочу, чтобы первый выбранный флажок в каждом списке был виден в div при обновлении страницы.Я могу сделать это, когда есть только один флажок, включив тег привязки.Но я могу разыграть эту карту только один раз на странице.Так есть ли способ контролировать, какие флажки появляются в пространстве, доступном в div, когда на странице более одного такого div?Совет от w3schools гласит: «Из-за различных способов сделать это, и потому что вы должны сообщить пользователю, что множественный выбор доступен, вместо этого удобнее использовать флажки».https://www.w3schools.com/tags/att_select_multiple.asp

Есть ли альтернатива JQuery - в этой статье раскрывающийся список флажков html предполагает, что JQuery обладает более широким диапазоном элементов управления, хотя, насколько я понимаю, они в конечном итоге построены из HTML и, следовательно, если JQueryпредлагает решение, должно быть возможно реализовать его без необходимости JQuery.

1 Ответ

0 голосов
/ 10 декабря 2018

Есть две функции 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

Весь кредит Мученику

...