HTML DOM Input Checkbox checked প্রপার্টি

HTML DOM Input Checkbox checked প্রপার্টি একটি চেকবক্সের বর্তমান চেকড অবস্থা (checked state) পাওয়া ও সেট করার জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীর ইন্টারঅ্যাকশন অনুযায়ী পরিবর্তন হয়।

সিনট্যাক্স

মান পাওয়া:

object.checked

মান সেট করা:

object.checked = true | false

উদাহরণ: বাটন দিয়ে চেক/আনচেক করা

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM checked property</title>
    <style>
        body { text-align: center; }
        p { font-size: 1.5rem; color: #ff8741; }
        input { width: 30px; height: 30px; }
        button {
            background-color: #db133a; color: #fff; padding: 8px;
            border: none; width: 120px; margin: 0.5rem;
            border-radius: 50px; outline: none;
        }
    </style>
</head>
<body>
    <h1>checked Property Example</h1>
    <p>Are you happy?</p>
    <input type="checkbox"> <br>
    <button onclick="checkYes()">Yes</button>
    <button onclick="checkNo()">No</button>

    <script>
        function checkYes() {
            document.querySelector("input").checked = true;
        }
        function checkNo() {
            document.querySelector("input").checked = false;
        }
    </script>
</body>
</html>

আউটপুট

• প্রাথমিক অবস্থায় চেকবক্স অনচেকড থাকে।
• "Yes" বাটনে ক্লিক করলে চেকবক্স চেক হবে।
• "No" বাটনে ক্লিক করলে চেকবক্স আনচেক হবে।

checked vs defaultChecked

• checked: বর্তমান অবস্থা (পড়া/লেখা উভয়) — ব্যবহারকারীর অ্যাকশন রিফলেক্ট করে।
• defaultChecked: প্রাথমিক অবস্থা (শুধু পড়া) — HTML-এ checked অ্যাট্রিবিউট থাকলে true।

ব্যবহারিক টিপস

• ফর্ম ভ্যালিডেশনে if (!checkbox.checked) ব্যবহার করে bắtবানী চেক করা যায়।
• লেবেল (<label>) এর সাথে চেকবক্স যুক্ত করলে ইউজার অভিজ্ঞতা বাড়ে।