উত্তর:
একটি labelট্যাগের মধ্যে চেকবক্সটি মোড়ানো :
<label><input type="checkbox" name="checkbox" value="value">Text</label>forঅ্যাট্রিবিউটটি ব্যবহার করুনforবৈশিষ্ট্যটি ব্যবহার করুন (চেকবাক্সের সাথে মেলে id):
<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>দ্রষ্টব্য : আইডি অবশ্যই পৃষ্ঠায় অনন্য হতে হবে!
যেহেতু অন্যান্য উত্তরগুলিতে এটি উল্লেখ করা হয়নি, একটি লেবেল 1 টি পর্যন্ত ইনপুট অন্তর্ভুক্ত করতে পারে এবং forবৈশিষ্ট্যটি বাদ দিতে পারে এবং ধরে নেওয়া হবে এটি এটির মধ্যে ইনপুটটির জন্য।
W3.org থেকে অংশ (আমার জোর দিয়ে):
[বৈশিষ্ট্যের জন্য] স্পষ্টভাবে অন্য নিয়ন্ত্রণের সাথে সংজ্ঞায়িত লেবেলটিকে সংযুক্ত করে। উপস্থিত থাকাকালীন, এই অ্যাট্রিবিউটের মান একই ডকুমেন্টের কিছু অন্য নিয়ন্ত্রণের আইডি বৈশিষ্ট্যের মান হিসাবে সমান হওয়া উচিত। অনুপস্থিত থাকলে, সংজ্ঞায়িত করা লেবেলটি উপাদানটির সামগ্রীর সাথে সম্পর্কিত।
স্পষ্টভাবে অন্য নিয়ন্ত্রণের সাথে একটি লেবেল সংযুক্ত করতে, নিয়ন্ত্রণ উপাদানটি অবশ্যই LABEL উপাদানটির সামগ্রীর মধ্যে থাকা উচিত । এই ক্ষেত্রে, LABEL কেবলমাত্র একটি নিয়ন্ত্রণ উপাদান থাকতে পারে । লেবেল নিজেই সম্পর্কিত নিয়ন্ত্রণের আগে বা পরে অবস্থান করতে পারে।
এই পদ্ধতিটি ব্যবহারের কিছু সুবিধা রয়েছে for:
idপ্রতিটি চেকবক্সে একটি দুর্দান্ত বরাদ্দ দেওয়ার দরকার নেই (দুর্দান্ত!)
এর মধ্যে অতিরিক্ত গুণাবলী ব্যবহার করার দরকার নেই <label>।
ইনপুটটির ক্লিকযোগ্য এলাকা হ'ল লেবেলের ক্লিকযোগ্য ক্ষেত্রও, সুতরাং ক্লিক করার জন্য দুটি পৃথক জায়গা নেই যা চেকবক্সটি নিয়ন্ত্রণ করতে পারে - কেবলমাত্র একটিই, যত তাড়াতাড়ি <input>লেবেল এবং প্রকৃত লেবেল পাঠ্য আলাদা নয়, এবং আপনি কী ধরণের সিএসএসের বিষয়টি বিবেচনা করুন না matter এটি প্রয়োগ করুন
কিছু সিএসএস সহ ডেমো:
label {
border:1px solid #ccc;
padding:10px;
margin:0 0 10px;
display:block;
}
label:hover {
background:#eee;
cursor:pointer;
}<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>লেবেলটি ইনপুটটির সাথে জড়িত তা নিশ্চিত করুন।
<fieldset>
<legend>What metasyntactic variables do you like?</legend>
<input type="checkbox" name="foo" value="bar" id="foo_bar">
<label for="foo_bar">Bar</label>
<input type="checkbox" name="foo" value="baz" id="foo_baz">
<label for="foo_baz">Baz</label>
</fieldset><input type="checkbox" name="foo[]" value="bar" ...>। এটি আপনাকে একটি অ্যারে দেবে যাতে সমস্ত পরীক্ষিত বাক্সের মান রয়েছে (যেটিতে এই নাম রয়েছে)। উদাহরণস্বরূপ $_POST['foo'][0]হতে পারে barএবং $_POST['foo'][1]হতে পারে baz(যদি উভয়ই চেক করা থাকে)।
আপনার সমস্ত চেকবক্সের মান বৈশিষ্ট্যগুলি (যথাক্রমে) থেকে আপনার লেবেল বাছাই এবং প্রদর্শন করতে আপনি সিএসএস সিউডো উপাদানগুলি ব্যবহার করতে পারেন।
সম্পাদনা করুন: এটি কেবল ওয়েবকিট এবং ব্লিঙ্ক ভিত্তিক ব্রাউজারগুলি (ক্রোম (আইওএম), সাফারি, অপেরা ....) এবং এভাবে বেশিরভাগ মোবাইল ব্রাউজারগুলির সাথে কাজ করবে। কোন ফায়ারফক্স বা IE সমর্থন এখানে।
এটি কেবল তখনই কার্যকর হতে পারে যখন আপনার অ্যাপ্লিকেশনগুলিতে ওয়েবকিট / ঝলক এম্বেড করে।
<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
content: attr(value);
margin: -3px 15px;
vertical-align: top;
white-space:nowrap;
display: inline-block;
}
</style>সমস্ত সিউডো উপাদান লেবেল ক্লিকযোগ্য হবে।
ডেমো: http://codepen.io/mrmoje/pen/oteLl , + এর সংক্ষিপ্তসার
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />nameগুণাবলীর মানটি বৈশিষ্ট্যের উপস্থিতি forএবং idগুণাবলীর উপস্থিতির চেয়ে আলাদা কিছুতে পরিবর্তন করা উচিত , যেহেতু এই দুটি সম্পর্কযুক্ত, যদিও nameএটি অন্তর্ভুক্ত নয় (যদিও আমি বিশ্বাস করি তবে এটি অন্তর্ভুক্ত করা অবশ্যই বাধ্যতামূলক) ।
এটি খুব কার্যকর:
<form>
<label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
<label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>forএবং idবৈশিষ্ট্যগুলি বাদ দিতে labelপারেন।
এটি আপনাকে সহায়তা করবে: ডাব্লু 3 স্কুল - লেবেল
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form><label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />চেকবক্সের সাথে এটি যুক্ত করতে labelউপাদান এবং forবৈশিষ্ট্যটি ব্যবহার করুন:
<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />
চেকবাক্স সহ কৌণিক উপাদান লেবেলে
<mat-checkbox>Check me!</mat-checkbox>এটা ব্যবহার কর
<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id" id="checkbox_lbl">Text</label>
$("#checkbox_lbl").click(function(){
if($("#checkbox_id").is(':checked'))
$("#checkbox_id").removAttr('checked');
else
$("#checkbox_id").attr('checked');
});
});