# Работа с чекбоксами в React

Работа с чекбоксами также осуществляется по схожему принципу, только вместо атрибута `value` мы указываем атрибут `checked`. Если в этот атрибут передать `true` - то чекбокс будет отмечен, а если `false` - не будет отмечен:

`function App() { return <div> <input type="checkbox" checked={true} /> отмечен <input type="checkbox" checked={false} /> не отмечен </div>; }`

Обычно в атрибут `checked` передается стейт, содержащий логическое значение:

`function App() { const [checked, setChecked] = useState(true); return <div> <input type="checkbox" checked={checked} /> </div>; }`

Так же, как и при работе с инпутами, если жестко задать значение атрибута `checked` - состояние чекбокса нельзя будет сменить. Для корректной работы будем по изменению чекбокса менять его стейт на противоположное ему значение:

`function App() { const [checked, setChecked] = useState(true); function handleChange() { setChecked(!checked); // инвертируем стейт } return <div> <input type="checkbox" checked={checked} onChange={handleChange} /> </div>; }`

Можем упростить:

`function App() { const [checked, setChecked] = useState(true); return <div> <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} /> </div>; }`

Давайте выведем состояние чекбокса в абзац, используя тернарный оператор:

`function App() { const [checked, setChecked] = useState(true); return <div> <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} /> <p>состояние: {checked ? 'отмечен' : 'не отмечен'}</p> </div>; }`

Дан чекбокс, кнопка и абзац. По клику на кнопку, если чекбокс отмечен, выведите в абзац текст приветствия с пользователем, а если не отмечен - текст прощания.

С помощью трех чекбоксов попросите пользователя выбрать языки, которые он знает: html, css и js. Результат выбора по каждому языку выводите в отдельные абзацы.

←→
↑