Я не могу найти решение для этого.
Необходимо проверить атрибут на входах, которые находятся перед выбранным входом с помощью 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">
Ответ 1 · рейтинг 1 · gyohza
Тогда, мой друг, это может быть так просто:
// 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 (возможно, мне не нужно было это менять, но у меня сложилось впечатление, что раньше это было более распространено).
