Как сделать функцию в Vanilla JS, которая помещает проверенный атрибут на радио-входы перед выбранным входом?

Я не могу найти решение для этого.

Необходимо проверить атрибут на входах, которые находятся перед выбранным входом с помощью JavaScript, и на входах после того, как он не отмечен.

UPD: изменил тип ввода на «флажок», и теперь мне нужна функция, которая помечает «отмеченными» флажки перед последним отмеченным, при этом снимая последующие флажки, если они были отмечены ранее.

Примечание. Решение должно использовать синтаксис, совместимый с ES5.

С примерами кода, пожалуйста!

<input type="checkbox" id="product-1" name="toggle">
<input type="checkbox" id="product-2" name="toggle">
<input type="checkbox" id="product-3" name="toggle">
<input type="checkbox" id="product-4" name="toggle">
<input type="checkbox" id="product-5" name="toggle">

javascript arrays checkbox ecmascript-5 preventdefault
person David Gogua    schedule 02.06.2020    source источник
comment
Радио не для этого. Вы не имеете в виду флажки? Радиокнопки предназначены только для одиночного выбора.   -  person gyohza    schedule 02.06.2020
comment
Не подтвердил это, но я почти уверен, что он проверяет другие переключатели, но затем они снимаются, как только вы после этого проверяете их следующих братьев и сестер.   -  person gyohza    schedule 02.06.2020
comment
Думал, что могу изменить их поведение по умолчанию и заставить его работать.   -  person David Gogua    schedule 02.06.2020
comment
Неа. Звучит как плохая практика. Если вам не нравится квадратный стиль флажков, лучше попробовать настроить их внешний вид, а не пытаться настроить поведение переключателей. Кстати, на твоей фотке неплохой стриптиз.   -  person gyohza    schedule 02.06.2020
comment
Спасибо, там гитарист Slint) Дело было не в стиле флажка, а в поведении. Я уже обновил вопрос.   -  person David Gogua    schedule 02.06.2020
comment
Это вполне выполнимо. Еще один вопрос: допустим, вы нажимаете на 4-й и все 3, прежде чем он будет проверен. Если вы нажмете 2-й, вы ожидаете, что 3-й и 4-й будут очищены?   -  person gyohza    schedule 02.06.2020
comment
Да! такое поведение я ожидаю.   -  person David Gogua    schedule 02.06.2020
comment
Хорошо. Я сейчас на работе, так что придется подождать несколько часов. Возможно, кто-то опубликует решение до тех пор.   -  person gyohza    schedule 02.06.2020
comment
Буду надеяться, что это будете вы) Заранее спасибо!   -  person David Gogua    schedule 02.06.2020
comment
Я немного опоздал, но так как никто не написал ответ - пожалуйста. :)   -  person gyohza    schedule 03.06.2020

Ответы (2)


arrow_upward
1
arrow_downward

Тогда, мой друг, это может быть так просто:

// checkbox elements
var boxes = document.getElementsByName('toggle');

// function to bind to each of the input tags' change event
function markPreceding() {

  // retrieve the value from the clicked input
  var curIndex = this.value;

  // iterate through every single checkbox named toggle
  for (var i = 0, box = boxes[i]; i < boxes.length; box = boxes[++i]) {
    // if data-index is lower or equal to curIndex, then true; else, false
    box.checked = box.value <= curIndex;
  }

}

// add function to the onchange handler of each input
for (var i = 0, box = boxes[i]; i < boxes.length; box = boxes[++i]) {
  box.onchange = markPreceding;
}
<input type="checkbox" id="product-1" name="toggle" value="1">
<input type="checkbox" id="product-2" name="toggle" value="2">
<input type="checkbox" id="product-3" name="toggle" value="3">
<input type="checkbox" id="product-4" name="toggle" value="4">
<input type="checkbox" id="product-5" name="toggle" value="5">

Заметки

Я сохранил индекс каждого флажка, используя атрибуты данных. .

Я мог использовать свойство value, например. Я предпочел использовать атрибуты данных, потому что вы можете использовать value для чего-то еще. Вам решать. (см. конец сообщения)

Мы можем получить каждый атрибут data-index из представления HTML в JavaScript с помощью .dataset.index. Это могло быть любое другое имя вместо «индекс». Просто помните, что если вы используете несколько слов, таких как data-my-custom-prop в HTML, вы должны называть их в JS как .dataset.myCustomProp (они получаются в верблюжьем регистре).

Свойство .checked в любом случае хранит логическое значение, поэтому вы можете передать сравнение box.dataset.index <= curIndex, которое будет оцениваться как true или false, с уважением устанавливая или снимая флажок.

EDIT: Поскольку вы спросили в комментариях, я попытался преобразовать его в синтаксис, совместимый с ES5. Во-первых, я перестал использовать атрибуты данных и получил входное значение с помощью ключевого слова this, а не event.target (возможно, мне не нужно было это менять, но у меня сложилось впечатление, что раньше это было более распространено).

person gyohza    schedule 03.06.2020
comment
Большое спасибо, сэр! Как раз то, что мне было нужно! - person David Gogua; 03.06.2020
comment
Я столкнулся с проблемой, что я не использую Babel в своем проекте и не могу использовать его для этого проекта. Можете ли вы показать мне, как использовать это в синтаксисе ES5, пожалуйста? - person David Gogua; 03.06.2020
comment
Я отредактировал свой ответ. Пожалуйста, проверьте, работает ли это для вас! :) - person gyohza; 03.06.2020

arrow_upward
0
arrow_downward

По умолчанию <input type="radio"> разрешает выбирать только один из входов/опций. Из-за этого только последний ввод помечается вашим JS-кодом. Чтобы иметь возможность выбрать несколько вариантов, используйте <input type="checkbox">. Дополнительные сведения: Документы MDN.

person João Vitor Amorim    schedule 02.06.2020
comment
Привет! Но я хочу установить индикатор выполнения шага, как я могу добиться этого с помощью JS, пример кода будет очень удобен, заранее спасибо - person David Gogua; 02.06.2020