এইচটিএমএল রেডিও বোতামটির লেবেলে ক্লিক করে টগল করুন


87

আমার ছোট পিএইচপি প্রকল্পে কোনও বড় জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক প্রবর্তন না করে - দয়া করে কোনও রেডিও বোতাম টগল করার কোনও সহজ উপায় আছে - যখন তার কাছাকাছি কোনও পাঠ্য ক্লিক করা হয়?

ওয়েব ফর্মটি দেখতে এমন দেখাচ্ছে:

<html>
<body>
<form method="post">
<p>Mode:<br /> 
<input type="radio" name="mode" value="create"><i>create table</i><br />
<input type="radio" name="mode" value="select" checked>select records (can specify id)<br />
<input type="radio" name="mode" value="insert">insert 1 record (must specify all)<br />
<input type="radio" name="mode" value="delete">delete records (must specify id)<br />
<input type="radio" name="mode" value="drop"><i>drop table</i><br />
</p>
<p>Id: <input type="text" name="id" size=32 maxlength=32 /> (32 hex chars)</p>

<p>Latitude: <input type="text" name="lat" size=10 /> (between -90 and 90)</p>
<p>Longitude: <input type="text" name="lng" size=10 /> (between -90 and 90)</p>
<p>Speed: <input type="text" name="spd" size=10 /> (not negative)</p>
<p><input type="submit" value="OK" /></p>
</form>
</body>
</html>

উত্তর:


165

এছাড়াও আপনি আপনার উপাদানের মোড়ানো পারেন ছাড়া তাদের প্রতিটি একটি আইডি দান থেকে <label>ইনপুট এটা রয়েছে, ভালো জন্য পরোক্ষভাবে হল:

<label>
   <input type="radio" name="mode" value="create">
   <i>create table</i>
</label>

4
এটি লেবেল স্টাইলিংকে আরও কঠিন করে তোলে এবং আপনার পাঠ্যকে আরও বেশি উপাদানগুলিতে মোড়ানো প্রয়োজন।
সোভিয়েট

4
হ্যাঁ, তবে আপনি স্টাইলিং না করে রাখলে এটি আপনার পছন্দসই কার্যকারিতাটি সহজ করে তোলে। আমি অতিরিক্ত আইডি এবং "জন্য" বৈশিষ্ট্য যুক্ত করতে পছন্দ করি না।
ডাঃ সি। হিলারিয়াস

4
সাধারণ নিয়ম হিসাবে এড়িয়ে চলা ভাল +1 আইডি খুব খারাপ হতে পারে
ক্রিস স্টিফেন্স

4
মোড়ক ব্যবহার idএবং একটি মোড়ক ছাড়া একটি উচ্চতর সমাধান for। কারণটি হ'ল যদি লেবেলের বিস্তৃত মার্জিন থাকে এবং ব্যবহারকারী চেকবক্স এবং লেবেলের (যেহেতু তারা সম্ভবতঃ সম্ভবতঃ করে থাকেন) মধ্যবর্তী মিষ্টি স্পটে ক্লিক করতে থাকে তবে কিছুই ঘটে না। ফিডল এখানে: jsfiddle.net/v157ctja/5
মার্কাস জুনিয়াস ব্রুটাস

72

আপনি <label>উপাদানগুলি ব্যবহার করতে পারেন , যা ঠিক তা করতে ডিজাইন করা হয়েছে:

<input type="radio" id="radCreateMode" name="mode" value="create" />
<label for="radCreateMode"><i>create table</i></label>

4
@ আলেকজান্ডার, একেবারে কেবল সাফারি সংস্করণ 2 এবং নিম্নতর এটি সমর্থন করে না।
ফ্রেডেরিক হামিদি

4
এবং তারপরে আপনি input#radCreateMode:checked ~ labelলেবেলে শৈলী প্রয়োগ করতে নির্বাচকটি ব্যবহার করতে পারেন । নির্বাচনের উপর লেবেলে স্টাইল প্রয়োগ করা যদি আমরা লেবেলের অভ্যন্তরে ইনপুটটি বাসাতে পারি না।
জুহাইব আলী

4
এটি সত্যই গ্রহণযোগ্য উত্তর হওয়া উচিত, এটি করার উপযুক্ত উপায়।
greco.roamin

4
আমি সাফারি বনাম 13 ব্যবহার করছি এবং এই পদ্ধতিটি আমার পক্ষে কার্যকর হয়নি। রেডিও বোতামটি অনির্বাচিত করা যেতে পারে, তবে নির্বাচন করা হয়নি। আমাকে ইনপুটটির চারপাশে লেবেলটি গুটিয়ে রাখতে হয়েছিল: <লেবেল> <ইনপুট> আমার লেবেল পাঠ্য </ li>>। মনে রাখবেন যে আমি কোনও <for>> বা কোনও <ফিল্ডসেট> ব্যবহার করছি না।
আইএএম_এল_এক্স

নিশ্চিত করুন যে বৈশিষ্ট্যটির মানটি ইনপুটটির জন্য সঠিক আইডি। যদি কেউ আমার মতো একই ভুল করে থাকে।
কেভিন। নেট

5

লেবেলের নীচে ইনপুট মোড়ানো কাজ করা উচিত।

<label>
    <input type="radio" name="mode" value="create"><i>create table</i>
</label>

1

এই পদ্ধতিটি ব্যবহার করে রেডিও বোতামটির মান খুঁজে পেতে আমার সমস্যা হয়েছিল, একটি বিকল্প হিট এরিয়া ব্যবহার করে একটি বোতামের ক্লিকযোগ্য ক্ষেত্র ব্যবহারযোগ্য হয়

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.