Всем привет, подскажите пожалуйста, вроде простая задачка, но уже второй

день сижу...

На странице 5 чекбоксов, по умолчанию они все checked="checked", при клике на любой из чекбоксов, нужно снять checked у всех пяти.

Могу найти в цикле текущей чекбокс, но как найти все остальные?

for (let i = 0; i < mainCheckbox.length; i++) {
mainCheckbox[i].onclick = function () {
mainCheckbox[i].checked = this.checked;
}
}

Тебе нужно сначала пойти по всем и убрать ччекед а потом конкретному добавить :)

Привет! Все чекеды должны быть всегда в одинаковых состояниях, по умолчанию они checked="checked", кликая на любой их них, все становятся not:checked и наоборот

то есть, один чекбокс как бы управляет всеми остальными?

да, именно так, понимаю, что бредово, но так надо сделать

делегируй клик на контейнер, после проверка e.target.type==='checkbox', внутри берешь значение e.target.checked и через квериселекторАлл и форич ставишь checked в значение из события

Ну так еще проще, перебираешь все чекеды и убираешь добавляешь состояние

Неверное добавлю немного инфы, добавь класс на каждый с них, и перебирай массив чекбоксов

Скинь кодепен не понятно в чем проблема:)

Если в реакте делать, то вот так это будет работать: const example = () => { const [isChecked, setIsChecked] = useState(true) ; const handleChange = () => setIsChecked(!isChecked) ; return <> <checkbox ischecked={isChecked} onChange={handleChange} /> И так 5 чекбоксов <\> }

У него не реакт насколько я понял

Зря)

😅😅😅😁

😁

И лучше конечно делать setIsChecked(prev => !prev)

Можешь объяснить почему?)

Стейт нужно менять иммутабельно, чтобы у реакта было что сравнить и правильно перерендерится

Как я написал тоже правильно перерендерится 🤷‍♂

Документацию ведь не дурак придумал. Во избежание ошибок, которые у тебя появятся вообще в другом уголке проекта, но которые появятся именно из-за такого сета, оно того не стоит

В этом случае правильно, в более сложных не правильно, будешь экспериментировать?

Парни, вы мне на документацию жалость не давите, пожалуйста. У меня в проектах спокойно работают варианты как я написал выше. Был бы благодарен если бы объяснили в какой момент при моëм написании может появиться ошибка или не надо поправлять если не владеете предметом 🤗

Ты понимаешь, что конкретных ситуаций никто не знает, так как твоя реализация вызывает так званное "непредвиденное поведение", именно поэтому никто тебе реальных примеров не даст

Тк хендлер не заколбечен может быть ошибка при его передаче дочерним компонентам

Изменение стейта напрямую вызывает непредвиденное поведение, а не мой вариант.

Иван Музыка

машинный перевод: Однако после одного клика age будет только 43, а не 45! Это связано с тем, что вызов функции set не обновляет переменную состояния age в уже запущенном коде. Таким образом, каждый вызов setAge(age + 1) становится setAge(43). Чтобы решить эту проблему, вы можете передать функцию обновления в setAge вместо следующего состояния:

Иван Музыка

Ну, правильно. У меня только один set.. , который просто переключает состояние. Короче, парни. Всë что вы пишете - правильно, молодцы. Но и в моëм варианте ошибки нет. В данном примере. И в другой компонент можно передать, без useCallback иди с ним отработает как нужно. Да в более сложных ситуациях соглашусь, иногда требуется писать prev => ...