displaying the selected item in multiple HTML checkbox lists

Question

Suppose I have two checkboxlist controls in HTML - each being simply a bordered div containing a number of checkboxes.

<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>

In each case, the number of checkboxes exceeds the height available in the div to display them, so the div is made scrollable using CSS. I want the first selected checkbox in each list to be visible in the div when the page refreshes. I can do this when there is just one checkboxlist by including an anchor tag. But I can only play that card once on the page. So is there any way to control which checkboxes appear in the space available in the div when there is more than one such div on the page?

Would I be better using a multi-select listbox? The advice from w3schools says 'Because of the different ways of doing this, and because you have to inform the user that multiple selection is available, it is more user-friendly to use checkboxes instead.' https://www.w3schools.com/tags/att_select_multiple.asp

Is there a JQuery alternative - this article dropdown checkbox list html suggests JQuery has a greater range of controls, though my understanding is they are ultimately built from HTML and therefore if JQuery offers a solution, it should be possible to implement it without needing JQuery.

DJDave · Accepted Answer · 2018-12-10 10:47:26Z

0

There are two javascript functions that I simply didn't know about - offsetTop and 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;
}

Solution here https://codepen.io/Martyr2/pen/dwyypN

All credit to Martyr

answered Dec 10, 2018 at 10:47

DJDave

9151 gold badge14 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

displaying the selected item in multiple HTML checkbox lists

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related