Reactda checkbox bilan ishlash

checkbox bilan ishlash ham o‘xshash printsip asosida amalga oshiriladi, faqat value atributi o‘rniga biz checked atributini ko‘rsatamiz. Agar bu atributga true uzatilsa - checkbox belgilanadi, agar false - belgilanmaydi:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> belgilangan
		<input type="checkbox" checked={false} /> belgilanmagan
	</div>;
}

Odatda checked atributiga mantiqiy qiymat o‘z ichiga olgan holat (state) uzatiladi:

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

Xuddi inputlar bilan ishlashda bo‘lgani kabi, agar checked atributi qiymati qattiq belgilansa - checkbox holatini o‘zgartirib bo‘lmaydi. To‘g‘ri ishlashi uchun checkbox o‘zgarishida uning holatini unga qarama-qarshi qiymatga o‘zgartiramiz:

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

Soddalashtirishimiz mumkin:

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

Keling, checkbox holatini ternar operator yordamida abzatsda ko‘rsatamiz:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>holati: {checked ? 'belgilangan' : 'belgilanmagan'}</p>
	</div>;
}

Checkbox, tugma va abzats berilgan. Tugmacha bosilganda, agar checkbox belgilangan bo‘lsa, abzatsga foydalanuvchi bilan salomlashish matnini chiqaring, agar belgilanmagan bo‘lsa - xayrlashuv matnini chiqaring.

Uchta checkbox yordamida foydalanuvchidan u biladigan tilarni tanlashini so‘rang: html, css va js. Har bir til bo‘yicha tanlov natijasini alohida abzatslarda chiqaring.