এই লেখা-আপ জাভাস্ক্রিপ্ট ব্যবহার করে চেকবক্স চেক এবং আনচেক করার পদ্ধতি বর্ণনা করবে।
কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করে চেকবক্স চেক/আনচেক করবেন?
জাভাস্ক্রিপ্টে চেকবক্সগুলি চেক বা আনচেক করতে, ' চেক করা ” বৈশিষ্ট্য। প্রথমে HTML এলিমেন্টের রেফারেন্স পান “ চেকবক্স 'এর সাহায্যে নির্ধারিত' আইডি ' ব্যবহার করে ' getElementById() 'পদ্ধতি, এবং তারপর, প্রয়োগ করুন' চেক করা ” তার মূল্যের উপর সম্পত্তি।
উদাহরণ 1: একক চেকবক্স চেক/আনচেক করুন
প্রথমে, কোডের নিম্নলিখিত লাইনগুলি সহ একটি HTML ফাইল তৈরি করুন:
< h3 > চেকবক্স চেক বা আনচেক করতে বোতাম ক্লিক করুন h3 >
< ইনপুট টাইপ = 'চেকবক্স' আইডি = 'চেকবক্স' > শর্তাবলীর সাথে একমত < br < br >
< বোতামের ধরন = 'বোতাম' অনক্লিক = 'চেক()' > হ্যাঁ বোতাম >
< বোতামের ধরন = 'বোতাম' অনক্লিক = 'আনচেক()' > না বোতাম >
উপরের কোডে:
- আইডি সহ একটি চেকবক্স তৈরি করুন “ চেকবক্স 'যা উপাদান অ্যাক্সেস করতে ব্যবহার করা হবে' চেকবক্স 'ক্রিয়া সম্পাদন করতে।
- দুটি বোতাম তৈরি করুন, ' হ্যাঁ ' এবং ' না ', চেকবক্সটি চেক বা আনচেক করতে যা ফাংশনটি ট্রিগার করবে ' চেক() ' এবং ' আনচেক() ” যথাক্রমে ক্লিক ইভেন্টে।
উপরের কোডটি কার্যকর করার পরে, আউটপুটটি এরকম হবে:
এরপরে, জাভাস্ক্রিপ্ট ফাইল বা ট্যাগের চেকবক্সে ক্রিয়া সম্পাদনের জন্য ফাংশনগুলি সংজ্ঞায়িত করুন। চেকবক্স চেক করতে, কোডের নীচের লাইনগুলি ব্যবহার করুন:
ফাংশন চেক ( ) {
ইনপুট দিন = নথি getElementById ( 'চেকবক্স' ) ;
ইনপুট. চেক করা = সত্য ;
}
উপরের কোডে:
- একটি ফাংশন সংজ্ঞায়িত করুন ' চেক() ” যা চেকবক্স চেক করতে বোতাম ক্লিক ট্রিগার করবে।
- ফাংশনের মূল অংশের ভিতরে, এর আইডি ব্যবহার করে চেকবক্সের রেফারেন্স পান ' চেকবক্স 'এর সাহায্যে' getElementById() 'পদ্ধতি এবং এটি একটি পরিবর্তনশীল মধ্যে সংরক্ষণ করুন' ইনপুট ”
- সেট করে চেকবক্স চেক করুন ' চেক করা 'সম্পত্তি' সত্য ”
'এ ক্লিক করে চেকবক্সটি আনচেক করতে না ” বোতাম, নীচের প্রদত্ত কোড ব্যবহার করুন:
ফাংশন আনচেক ( ) {ইনপুট দিন = নথি getElementById ( 'চেকবক্স' ) ;
ইনপুট. চেক করা = মিথ্যা ;
}
উপরের কোড স্নিপেট:
- একটি ফাংশন সংজ্ঞায়িত করুন ' আনচেক() ” যা চেকবক্সটি আনচেক করতে বোতাম ক্লিক ট্রিগার করবে।
- ফাংশনের মূল অংশের ভিতরে, এর আইডি ব্যবহার করে চেকবক্সের রেফারেন্স পান ' চেকবক্স 'এর সাহায্যে' getElementById() 'পদ্ধতি এবং এটি একটি পরিবর্তনশীল মধ্যে সংরক্ষণ করুন' ইনপুট ”
- 'সেটিং করে চেকবক্সটি আনচেক করুন' চেক করা 'সম্পত্তি' মিথ্যা ”
অবশেষে, পৃষ্ঠা লোডে ডিফল্টরূপে চেকবক্সটি আনচেক করার জন্য একটি ফাংশন সংজ্ঞায়িত করুন “ window.onload ঘটনা:
জানলা. লোড = ফাংশন ( ) {জানলা. AddEventListener ( 'ভার' , চেক , মিথ্যা ) ;
}
আউটপুট
আউটপুটটি বোঝায় যে বোতামগুলিতে ক্লিক করার সময় চেকবক্সটি চেক করা হয়েছে এবং সফলভাবে আনচেক করা হয়েছে।
উদাহরণ 2: একাধিক চেকবক্স চেক/আনচেক করুন
আসুন একটি উদাহরণ দেখি কিভাবে একই সময়ে সমস্ত চেকবক্স চেক বা আনচেক করা যায়।
প্রথমে একটি এইচটিএমএল ফাইল তৈরি করুন এবং তারপর একাধিক চেকবক্স এবং আইডি সহ একটি বোতাম তৈরি করুন “ টগল ' যা চেকবক্সটিকে চেক বা আনচেক করতে টগল করবে:
< h3 > সমস্ত চেকবক্স চেক বা আনচেক করতে বোতামে ক্লিক করুন h3 >< ইনপুট টাইপ = 'চেকবক্স' ক্লাস = 'চেকবক্স' > আমাকে চেক বা আনচেক করুন < br >
< ইনপুট টাইপ = 'চেকবক্স' ক্লাস = 'চেকবক্স' > আমাকে চেক বা আনচেক করুন < br >
< ইনপুট টাইপ = 'চেকবক্স' ক্লাস = 'চেকবক্স' > আমাকে চেক বা আনচেক করুন < br >
< ইনপুট টাইপ = 'চেকবক্স' ক্লাস = 'চেকবক্স' > আমাকে চেক বা আনচেক করুন < br >
< ইনপুট টাইপ = 'চেকবক্স' ক্লাস = 'চেকবক্স' > আমাকে চেক বা আনচেক করুন < br < br >
< ইনপুট টাইপ = 'বোতাম' আইডি = 'টগল' মান = 'চেকবক্সগুলি টগল করতে ক্লিক করুন' >
সংশ্লিষ্ট আউটপুট হবে:
এর পরে, একটি JavaScript ফাইল বা