select only one checkbox in a group | Single একটা checkbox সিলেক্ট করা যাচ্ছেনা
Md mohiuddin
| Asked on 2022-10-19 | • HTML, CSS
Single একটা checkbox সিলেক্ট করা যাচ্ছেনা একাধিক checkbox এর মধ্যে। শুধু একটা সিলেক্ট করা যাচ্ছেনা ।
যেমনঃ
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
<input type="submit" value="Submit">
</form>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
<input type="submit" value="Submit">
</form>
শুধুমাত্র HTML দিয়ে এটি করা যাবে না। আপনার JavaScript লাগবে।
JavaScript Code:
function onlyOne(checkbox) {
var checkboxes = document.getElementsByName('vehicle1')
checkboxes.forEach((item) => {
if (item !== checkbox) item.checked = false
})
}
</script>
HTML Code
সবগুলো input এর নাম same রাখতে হবে।
<input type="checkbox" name="vehicle1" value="Bike" onclick="onlyOne(this)">
<label for="vehicle1"> I have a bike</label>
<input type="checkbox" name="vehicle1" value="Car" onclick="onlyOne(this)">
<label for="vehicle2"> I have a car</label>
<input type="checkbox" name="vehicle1" value="Boat" onclick="onlyOne(this)">
<label for="vehicle3"> I have a boat</label>
<input type="submit" value="Submit">
</form>