এই নিবন্ধটি জাভাস্ক্রিপ্টে HTML DOM ইনপুট চেকবক্স 'অক্ষম' বৈশিষ্ট্যের উদ্দেশ্য, কাজ এবং ব্যবহার ব্যাখ্যা করে।
কিভাবে HTML DOM ইনপুট চেকবক্স 'অক্ষম' প্রপার্টি জাভাস্ক্রিপ্টে কাজ করে?
ইনপুট চেকবক্স ' অক্ষম ' সম্পত্তি 'চেকবক্স' বৈশিষ্ট্যের উপর নির্ভর করে। এটি প্রদত্ত চেকবক্সগুলিকে নিষ্ক্রিয় এবং নিষ্ক্রিয় করতে HTML ফর্ম এবং ইনপুট ক্ষেত্রে কাজ করে।
সিনট্যাক্স (অক্ষম বৈশিষ্ট্য সেট করুন)
চেকবক্স অবজেক্ট। অক্ষম = সত্য | মিথ্যাসংজ্ঞায়িত রিটার্ন সিনট্যাক্স অনুসারে, 'অক্ষম' বৈশিষ্ট্য দুটি পরামিতি সমর্থন করে যা নিম্নরূপ তালিকাভুক্ত করা হয়েছে:
- সত্য: এটি প্রতিনিধিত্ব করে যে সংশ্লিষ্ট চেকবক্স নিষ্ক্রিয় করা হয়েছে।
- মিথ্যা (ডিফল্ট মান): এটি একটি ঐচ্ছিক মান যা বোঝায় যে সংশ্লিষ্ট চেকবক্সটি নিষ্ক্রিয় নয়।
প্রত্যাবর্তন (অক্ষম সম্পত্তি ফিরিয়ে দিন)
চেকবক্স অবজেক্ট। অক্ষমউপরের সিনট্যাক্সে, ' চেকবক্স অবজেক্ট 'HTML এর সাথে মিলে যায়' চেকবক্স ' উপাদান।
আসুন 'অক্ষম' সম্পত্তির ব্যবহারিক বাস্তবায়ন বোঝার জন্য নীচের উদাহরণগুলিতে উপরে-সংজ্ঞায়িত বাক্য গঠনগুলি ব্যবহার করি।
উদাহরণ 1: ইনপুট চেকবক্স 'অক্ষম' সম্পত্তি প্রয়োগ করা বেসিক সিনট্যাক্স ব্যবহার করা
প্রথম উদাহরণে, সংজ্ঞায়িত সাধারণ সিনট্যাক্স ব্যবহার করে এটি নিষ্ক্রিয় করতে 'চেকবক্স' যোগ করা হয়েছে।
HTML কোড
প্রথমত, প্রদত্ত HTML কোড বিশ্লেষণ করুন:
< শরীর শৈলী = 'টেক্সট-সারিবদ্ধ: কেন্দ্র' >
< h2 > এইচটিএমএল DOM ইনপুট চেকবক্স জাভাস্ক্রিপ্টে অক্ষম করা সম্পত্তি h2 >
চেকবক্স : < ইনপুট টাইপ = 'চেকবক্স' আইডি = 'ডেমো' > ফর্ম জমা < br < br >
< পি > প্রদত্ত চেকবক্স নিষ্ক্রিয় করা হয়েছে৷ পি >
উপরের কোড লাইনে:
- দ্য ' ' ট্যাগ শরীরের অংশটি নির্দিষ্ট করে যা 'এর সাথে সারিবদ্ধ কেন্দ্র 'এর সাহায্যে' শৈলী ” বৈশিষ্ট্য।
- দ্য ' ” ট্যাগ লেভেল 2 এর উপশিরোনামকে সংজ্ঞায়িত করে।
- দ্য ' <ইনপুট> ' ট্যাগ ইনপুট প্রকার ' নির্দিষ্ট করে একটি 'চেকবক্স' তৈরি করে চেকবক্স 'একটি নির্ধারিত আইডি থাকা' ডেমো ”
- দ্য ' ” ট্যাগ ফলাফলের ফলাফল প্রদর্শন করতে একটি অনুচ্ছেদ উপাদান যোগ করে।
জাভাস্ক্রিপ্ট কোড
পরবর্তী, জাভাস্ক্রিপ্ট কোড দেখুন:
< লিপি >নথি getElementById ( 'ডেমো' ) . অক্ষম = সত্য ;
লিপি >
উপরের কোড স্নিপেটে, ' document.getElementById() ' পদ্ধতিটি তার আইডি 'ডেমো' ব্যবহার করে চেকবক্স আনার জন্য প্রয়োগ করা হয় এবং 'অক্ষম' সম্পত্তির মান 'এ সেট করা হয় সত্য যা চেকবক্স নিষ্ক্রিয় করে।
আউটপুট
উপরের আউটপুট নিশ্চিত করে যে প্রদত্ত চেকবক্সটি অক্ষম করা হয়েছে কারণ ' অক্ষম 'সম্পত্তি সেট করুন' সত্য ”
উদাহরণ 2: ইনপুট চেকবক্স 'অক্ষম' সম্পত্তির মান ফিরিয়ে দেওয়া
এই উদাহরণটি বুলিয়ান মান (সত্য/মিথ্যা) হিসাবে লক্ষ্যযুক্ত চেকবক্সের স্থিতি ফেরাতে 'অক্ষম' বৈশিষ্ট্যটি প্রয়োগ করে।
HTML কোড
নিম্নলিখিত HTML কোড বিবেচনা করুন:
< শরীর শৈলী = 'টেক্সট-সারিবদ্ধ: কেন্দ্র' >< h2 > এইচটিএমএল DOM ইনপুট চেকবক্স জাভাস্ক্রিপ্টে অক্ষম করা সম্পত্তি h2 >
চেকবক্স : < ইনপুট টাইপ = 'চেকবক্স' অক্ষম = সত্য আইডি = 'ডেমো' > ফর্ম জমা < br < br >
< পি আইডি = 'নমুনা' >> পি >
উপরের কোড ব্লকে:
- চেকবক্স বরাদ্দ করা হয়েছে এবং 'এর স্থিতি অক্ষম 'সম্পত্তি সেট করা হয়েছে' সত্য ”
- এর পরে, একটি খালি ' আউটপুট যুক্ত করার জন্য একটি নির্দিষ্ট আইডি 'নমুনা' এর সাথে উপাদান যোগ করা হয়।
জাভাস্ক্রিপ্ট কোড
এখন, জাভাস্ক্রিপ্ট কোডে যান:
< লিপি >সেখানে একটি = নথি getElementById ( 'ডেমো' ) . অক্ষম ;
নথি getElementById ( 'নমুনা' ) . innerHTML = ক ;
লিপি >
উপরের কোডে:
- পরিবর্তনশীল ' ক ' ব্যবহার করে ' document.getElementById() ' এর আইডি 'ডেমো' ব্যবহার করে চেকবক্স অ্যাক্সেস করার পদ্ধতি এবং 'কে সংযুক্ত করুন অক্ষম ' আনা চেকবক্স নিষ্ক্রিয় কি না তা পরীক্ষা করার জন্য সম্পত্তি।
- 'document.getElementById()' পদ্ধতিটি আবার অন্তর্ভুক্ত খালি অনুচ্ছেদটি নিয়ে আসে এবং একটি অনুচ্ছেদ হিসাবে 'অক্ষম' সম্পত্তির স্থিতি প্রদর্শন করে।
আউটপুট
বিশ্লেষিত হিসাবে, ফলাফল 'চেকবক্স' বরাদ্দ স্থিতি প্রদান করে যেমন, ' সত্য ”
উদাহরণ 3: ইনপুট চেকবক্স 'অক্ষম' বৈশিষ্ট্য ব্যবহার করে চেকবক্সটি নিষ্ক্রিয় এবং নিষ্ক্রিয় করুন
চেকবক্সের স্থিতি সেট করা এবং ফেরত দেওয়া ছাড়াও, 'অক্ষম' বৈশিষ্ট্যটি ব্যবহারকারীদের একই সময়ে চেকবক্সটিকে নিষ্ক্রিয় এবং নিষ্ক্রিয় করার অনুমতি দেয়। আসুন এটি ব্যবহারিকভাবে দেখি।
HTML কোড
লিখিত HTML কোড পর্যালোচনা করা যাক:
< শরীর শৈলী = 'টেক্সট-সারিবদ্ধ: কেন্দ্র' >< h2 > এইচটিএমএল DOM ইনপুট চেকবক্স জাভাস্ক্রিপ্টে অক্ষম করা সম্পত্তি h2 >
চেকবক্স : < ইনপুট টাইপ = 'চেকবক্স' আইডি = 'ডেমো' > ফর্ম জমা ইনপুট < br < br >
< বোতামে ক্লিক করুন = 'চেক অক্ষম()' > চেকবক্স অক্ষম করুন বোতাম >
< বোতামে ক্লিক করুন = 'চেক আনডিসেবল()' > চেকবক্স অক্ষম করুন বোতাম >
উপরের কোড ব্লকে:
- একইভাবে, একটি চেকবক্স অন্তর্ভুক্ত করুন এবং একটি বোতাম যুক্ত করুন ' অনক্লিক 'ইভেন্ট যা কার্যকর করে' চেক অক্ষম() ” বোতামে ক্লিক করার ফাংশন।
- এর পরে, দ্বিতীয় বোতামটি যোগ করা হয়েছে যা 'অনক্লিক' ইভেন্ট হ্যান্ডলার ব্যবহার করে ' চেক আনডিজেবল() বোতামটি ক্লিক করলে ফাংশন।
জাভাস্ক্রিপ্ট কোড
এর পরে, নীচের-উল্লেখিত কোডের মাধ্যমে যান:
< লিপি >ফাংশন চেক অক্ষম ( ) {
নথি getElementById ( 'ডেমো' ) . অক্ষম = সত্য ;
}
ফাংশন চেক আনডিজেবল ( ) {
নথি getElementById ( 'ডেমো' ) . অক্ষম = মিথ্যা ;
}
লিপি >
উপরের কোড লাইনে:
- 'নামক একটি ফাংশন সংজ্ঞায়িত করুন চেক অক্ষম() 'যা প্রযোজ্য' document.getElementById() ' পদ্ধতিটি তার আইডি 'ডেমো' এর মাধ্যমে চেকবক্সের কাছে যেতে এবং এর মান 'সত্য' এ সেট করে।
- দ্বিতীয় ফাংশন ' চেক আনডিজেবল() ' ফাংশনটি আবার 'document.getElementById()' পদ্ধতি প্রয়োগ করে চেকবক্সটি আবার অ্যাক্সেস করতে এবং এর মানকে 'false' তে সেট করে যদি ব্যবহারকারী 'চেকবক্স আনডিসেবল' নামের অন্তর্ভুক্ত দ্বিতীয় বোতামে ক্লিক করেন।
আউটপুট
ব্যবহারকারী প্রথম বোতামে ক্লিক করলে আউটপুট প্রদত্ত চেকবক্সটিকে 'অক্ষম' করে এবং ব্যবহারকারী যদি সেই অনুযায়ী দ্বিতীয় বোতামে ক্লিক করে তবে এটি 'আন-অক্ষম' করে।
উপসংহার
জাভাস্ক্রিপ্টে, HTML DOM ইনপুট চেকবক্স “ অক্ষম ' সম্পত্তি ব্যবহারকারীদের 'চেকবক্স' এর চেক করা স্থিতি সেট করতে এবং ফেরত দিতে সহায়তা করে। এটি 'সেট' এবং 'রিটার্ন' উভয় প্রক্রিয়ার জন্য সাধারণ সিনট্যাক্স সংজ্ঞায়িত করে। এর সেট সিনট্যাক্স দুটি মানের উপর কাজ করে ' সত্য ' এবং ' মিথ্যা ” অন্যদিকে, এর রিটার্ন সিনট্যাক্সের জন্য কোন প্যারামিটারের প্রয়োজন হয় না। এই নিবন্ধটি জাভাস্ক্রিপ্টে HTML DOM ইনপুট চেকবক্স 'অক্ষম' বৈশিষ্ট্যের উদ্দেশ্য, কাজ এবং ব্যবহারিক বাস্তবায়ন প্রদর্শন করেছে।