javascript - How to show the order number in which the checkboxes are clicked?

Question

I am trying to output the order number in which the checkboxes are checked. Whichever checkbox is checked first should show "a" beside it, whichever is checked second should show "b" beside it and so on.. Can anyone help?

<ul class="dropdown-content checkboxes">
  <li>
    <label>
      <input type="checkbox" />
      Billy
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      Jacob
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      Bob
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      Alexandren
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      Erren
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      Stewgart
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      Jillian
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      Other
    </label>
  </li>
</ul>

标签： javascripthtmljquery

Answer 1

You can add checked checkboxes at the end of an array, and remove them when get unchecked. By doing so, it will automatically adjust letters on checked boxes like so:

const cb = document.querySelectorAll('ul.checkboxes input[type="checkbox"]');
const order = [];
const onInput = e =>
{
  const data = e.target;
  const index = order.indexOf(data);
  if (index != -1)
    order.splice(index, 1);

  if (e.target.checked)
    order[order.length] = data;

  for(let i = 0; i < cb.length; i++)
  {
    const index = order.indexOf(cb[i]);
    cb[i].parentNode.setAttribute("num", String.fromCharCode(65 + index));
  }
}
for(let i = 0; i < cb.length; i++)
  cb[i].addEventListener("input", onInput);

.checkboxes label[num]:not([num = "@"]):before
{
  content: attr(num);
}

.checkboxes label:before
{
  content: "";
  width: 1em;
  display: inline-block;
}

<ul class="dropdown-content checkboxes">
<li>
    <label>
        <input type="checkbox" />Billy</label>
</li>
<li>
    <label>
        <input type="checkbox" />Jacob</label>
</li>
<li>
    <label>
        <input type="checkbox" />Bob</label>
</li>
<li>
    <label>
        <input type="checkbox" />Alexandren</label>
</li>
<li>
    <label>
        <input type="checkbox" />Erren</label>
</li>
<li>
    <label>
        <input type="checkbox" />Stewgart</label>
</li>
<li>
    <label>
        <input type="checkbox" />Jillian</label>
</li>
<li>
    <label>
        <input type="checkbox" />Other</label>
</li>