دکمه رادیویی Radio button
دکمه رادیویی یا Radio button چیست؟
دکمه رادیویی (Radio button) یا دکمه انتخابی (Option button) یکی از انواع ویجت های رابط کاربری گرافیکی است که به کاربر اجازه میدهد از میان چند گزینه از پیش مشخص شده یک گزینه را انتخاب نماید.
دکمه های رادیویی از لحاظ منطقی در قالب گروههایی حداقل دو عددی ظاهر میشوند و کاربر تنها امکان انتخاب یک دکمه (یا یک گزینه) در هر گروه را خواهد داشت.
این المان ها معمولا در مواقعی به کار میروند که تعداد گزینه های موردنظر محدود و انگشت شمار هستند و در عین حال انتخاب همزمان چند گزینه در آنها توجیه منطقی ندارد. جنس (مرد یا زن)، نوع خودرو هنگام خرید آنلاین بیمه خودرو (مانند سدان، ون، کراس اور و …) و بازه سن (مانند 0 تا 10 سال، 11 تا 30 سال، 31 تا 60 سال و 61 سال به بالا) از جمله مواردی هستند که برای استفاده از رادیو باتن ها مناسب میباشند.

دلیل استفاده از نام دکمه رادیویی برای این ویجت های گرافیکی را میتوان در تشابه آنها با برخی از دکمههایی که روی رادیوهای قدیمی به شکل فیزیکی وجود داشتند جستجو نمود. به این ترتیب که در این دستگاهها با فشرده شدن یک دکمه، دکمه فشرده شده قبلی بیرون آمده و به حالت فشرده نشده تغییر پیدا میکرد.
ظاهر و نحوه تعامل با دکمه های رادیویی
هر دکمه رادیویی به طور معمول با کمک یک دایره که وضعیت آن را مشخص میکند شناخته میشود (دایره تو پر برای حالت انتخاب شده و دایره تو خالی برای حالت انتخاب نشده). معمولا به هرکدام از این دکمه ها یک برچسب (لیبل) اختصاص داده میشود که گزینه متناظر با آن را توصیف میکند.
کاربر برای انتخاب کردن یک دکمه رادیویی میتواند از سه روش رایج زیر استفاده کند:
- روی دکمه مربوطه یا لیبل آن کلیک کند و یا در صفحه نمایش های لمسی آن را لمس نماید. (توجه داشته باشید وجود لیبل به خصوص در دستگاه های با صفحه نمایش کوچک مانند گوشی های هوشمند، تعامل با دکمه را آسانتر میکند)
- در حالتی که دکمه دارای فوکس میباشد کلید Space bar را فشار دهد.
- از کلید میانبر منتسب به دکمه (در صورت وجود) استفاده کند.
ممکن است در یک صفحه چندین گروه از دکمه های رادیویی تعبیه شده باشند که هر گروه شامل تعداد متفاوتی از این نوع دکمه ها باشد. طبیعتا کاربر میتواند در هر گروه، یکی از دکمه ها را متناسب با گزینه موردنظر خود انتخاب نماید.
هنگامی که کاربر یک Radio button را در یک گروه انتخاب میکند دکمه انتخاب شده پیشین در آن گروه (در صورت وجود) به حالت انتخاب نشده تغییر وضعیت پیدا میکند (مشابه با برخی کلیدها در رادیوهای قدیمی) و درنتیجه اجبار به انتخاب تک گزینهای برای این المانها تضمین میشود.
البته ممکن است در ابتدا هیچ کدام از Radio button ها در وضعیت انتخاب شده قرار نداشته باشند. اما توجه داشته باشید که این وضعیت پس از انتخاب یکی از دکمهها توسط کاربر به شکل معمولی قابل بازگشت نخواهد بود.
تفاوت Radio button و Checkbox
جعبه های بررسی یا چک باکس ها (Checkbox) هم مشابه با رادیو باتن ها برای انتخاب گزینه ها به کار میروند با این تفاوت که دکمه های رادیویی به کاربر اجازه میدهند فقط یک گزینه را از میان مجموعهای از گزینه ها انتخاب کند در حالیکه چک باکس ها امکان انتخاب کردن چند گزینه به طور همزمان و یا انتخاب هیچ کدام از گزینه ها را برای کاربر مهیا میکنند.
در واقع در هر گروه از Radio button ها تنها یک دکمه میتواند در حالت انتخاب شده قرار داشته باشد اما هر Checkbox به طور مجزا میتواند در حالت انتخاب شده یا انتخاب نشده قرار بگیرد.
برای مثال در مورد انتخاب حیوان خانگی مورد علاقه از میان گزینه های گربه، سگ، ماهی آکواریومی و پرنده، اگر از دکمه های رادیویی استفاده شده باشد کاربر تنها میتواند نام یک حیوان را انتخاب کند. این درحالیست که با استفاده از چک باکس ها امکان انتخاب هیچ کدام یا چند حیوان نیز فراهم میباشد.
رادیو باتن ها در HTML
برای ایجاد یک دکمه رادیویی در HTML از المان <input> با نوع radio (به صورت <input type=”radio”>) مشابه با مثال زیر استفاده میشود.
<form action="/action_page.php"> <p>Please select your car type:</p> <input type="radio" id="suv" name="car" value="suv"> <label for="suv">SUV</label><br> <input type="radio" id="sedan" name="car" value="sedan"> <label for="sedan">Sedan</label><br> <input type="radio" id="van" name="car" value="van"> <label for="van">Van</label><br> <input type="radio" id="sports" name="car" value="sports"> <label for="sports">Sports Car</label><br> <input type="radio" id="crossover" name="car" value="crossover"> <label for="crossover">Crossover</label><br> <input type="radio" id="other" name="car" value="other"> <label for="other">Other</label> <br><br> <input type="submit" value="Submit"> </form>
لیبل های دکمه های رادیویی در HTML
در مثال فوق برای مشخص کردن برچسب دکمه ها از تگ <label> استفاده شده است. برای انتساب لیبل به یک دکمه، مقدار خصوصیت for در این المان ها مساوی با مقدار خصوصیت id اختصاص داده شده برای تگ <input> متناظر خواهد بود. کاربر با کلیک روی خود دکمه یا برچسب اختصاص داده شده به آن میتواند دکمه را انتخاب کند.
البته در صورتی که تگ <input> در داخل تگ <label> قرار داده شود بدون استفاده از ویژگی های id و for هم المان <label> به المان <input> ای که دربرگرفته است تخصیص داده میشود. (با اینحال پیشنهاد میشود در این حالت هم مشابه با نمونه زیر از ویژگی id و for استفاده شود).
<label for="suv"> <input type="radio" id="suv" name="car" value="suv"> SUV </label>
گفتنی است اسکرین ریدرها نیز معمولا متن لیبل را هنگام قرار گرفتن فوکس روی دکمه برای کاربر میخوانند. این قابلیت به خصوص برای افراد نابینا حین تعامل با صفحات وب مفید واقع میشود.
ویژگی name برای گروه بندی Radio button ها در HTML
برای گروه بندی دکمه های رادیویی در HTML از مقدار یکسان برای خاصیت name در تگ <input> استفاده میشود. به عنوان مثال تمام تگ های <input> در مثال فوق دارای مقدار “car” برای خاصیت name هستند که یک گروه از دکمه های رادیویی را تشکیل میدهند.
ویژگی value برای تشخیص دکمه رادیویی انتخاب شده پس از سابمیت
توجه داشته باشید مقدار منتسب به value در حالت عادی به کاربر نمایش داده نمیشود. این مقدار در واقع همان چیزی است که هنگام سابمیت کردن همراه با نام المان به شکل name=value برای سرور ارسال میشود و گزینه انتخاب شده را مشخص میکند.
برای نمونه اگر دکمه رادیویی اول در مثال بالا انتخاب شده باشد اطلاعات فرم سابمیت شده شامل عبارت car=suv خواهد بود. توجه داشته باشید اگر value برای دکمه رادیویی مشخص نشده باشد مقدار پیشفرض on برای دکمه درنظر گرفته میشود و نتیجه به صورت car=on خواهد بود که براساس آن امکان تشخیص دکمه انتخاب شده وجود ندارد. بنابراین توصیه میشود مقدار مناسبی برای ویژگی value در تمام Radio button ها تخصیص دهید.
انتخاب Radio button به صورت پیشفرض در HTML
معمولا از لحاظ منطقی ترجیح داده میشود فرم طراحی شده درحالیکه هیچ یک از Radio button ها توسط کاربر انتخاب نشده است سابمیت نشود. به عنوان راهکاری ساده میتوانید به صورت پیشفرض یکی از دکمه ها را در وضعیت انتخاب شده قرار دهید. برای این منظور لازم است خاصیت checked را به تگ <input> موردنظر اضافه کنید.
برای نمونه در مثال فوق اگر تگ <input> اول را به شکل زیر تغییر دهید پس از لود شدن صفحه، این گزینه به صورت پیشفرض انتخاب شده خواهد بود.
<input type="radio" id="suv" name="car" value="suv" checked>
پیوندهای پیشنهادی تک دیک
سلام ممنون از مطلبی که گذاشتین
یه سوال
یه سند ( ورد ) دارم میخوام کل رادیو باتن هاش ( Radio button) پاک بشن مثل یه متن ساده ورد بشه باید چکار کنم که رادیو باتن های کل سند حذف بشه
ممنون از شما دوست عزیز
با سلام
من از رادیو باتن برای چند مورد …
زن ..مرد…
شاغل . و غیر شاغل .. استفاده کردم…
حالا تو ویرایش پرسنل وقتی میخوان به فرض شاغل یا غیر شاعل انتخاب کنم از طریق این دکمه ها…
هنگام لود میخوام همه باتن ها خالی باشه یعنی هیچ کدام از رادیو باتن ها فعال نباشه همیشه در هنگام لود خالی بشن..
و از اول خودم بتونم یکیشو انتخاب کنم
سلام. جزئیات مشکلتون و بخش مربوط به کد رو کامل بیان نکردین. اما حالت عادی اینه که اطلاعات از دیتابیس خونده بشن و وقتی صفحه لود میشه هم هر دکمه رادیویی که ویژگی checked نداشته باشه انتخاب نخواهد بود. اما به هر دلیلی که این رو می پرسید می تونید با کد جاوااسکریپت زیر یا مشابهش این کار رو انجام بدین. فرض شده مقدار ویژگی name برای تمام دکمه های رادیویی مورد نظر برابر با radio-buttons-name-value هستش.
سلام ممنون از توضیحات. سوالم اینه برای دکمه های رادیویی چطور کاری کنیم که هر دو دکمه موقع انتخاب روشن نشن. من تازه دارم html یاد میگیرم و این یکی ا زمشکلاتمه که هر دو دکمه رو میشه انتخاب کرد درحالی که قاعدتا وقتی گزینه یک رو انتخاب میکنی نباید همزمان گزینه دو هم قابل انتخاب کردن باشه. ممنون میشم جواب بدید
سلام؛
مشکل شما در این موضوع نهفته که دکمه های رادیویی رو گروه بندی نکردین یا دکمه ها رو در گروه یکسان قرار ندادین. همونطور که در متن توضیح داده شده در هر گروه تنها یک دکمه قابل انتخاب هست. اما اگر گروه بندی نکنید یا گروهی که دکمه ها داخلش هستن متفاوت باشه در اونصورت هر دو دکمه قابل انتخاب خواهند بود. به مثال داخل متن توجه کنید حتما متوجه می شید. باید مقدار ویژگی name یکسان باشه برای هر دو دکمه رادیویی تا در یک گروه قرار بگیرند.