{"id":14402,"date":"2011-09-20T21:06:43","date_gmt":"2011-09-21T04:06:43","guid":{"rendered":"http:\/\/css-tricks.com\/?p=14402"},"modified":"2011-09-21T07:52:11","modified_gmt":"2011-09-21T14:52:11","slug":"radio-buttons-with-2-way-exclusivity","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/radio-buttons-with-2-way-exclusivity\/","title":{"rendered":"Radio Buttons with 2-Way Exclusivity"},"content":{"rendered":"

Let’s say you were tasked with creating a UI in which users can rate three candy bars from their most to least favorite. A grid of radio buttons isn’t a terrible way to go about this.<\/p>\n

\n\"\"
A (small) grid of radio buttons.<\/figcaption><\/figure>\n

The good news is that radio buttons have natural exclusivity in the name-group they are in, and we can use that to our advantage. The bad news is that we have interlocking groups and there is no way to express that in a functional way through HTML alone.<\/p>\n

\n\"\"
Only one radio button can be selected in each circled group<\/figcaption><\/figure>\n

Let’s craft the HTML in such a way that the horizontal groups share the same name, granting exclusivity automatically. And we’ll also add an HTML data-* attribute which signifies the column which we’ll use to simulate the vertical exclusivity with JavaScript1<\/sup>.<\/p>\n

<table>\r\n<tr>\r\n    <th><\/th>\r\n    <th>1<\/th>\r\n    <th>2<\/th>\r\n    <th>3<\/th>\r\n<\/tr>\r\n<tr>\r\n    <td>Twix<\/td>\r\n    <td><input type=\"radio\" name=\"row-1\" data-col=\"1\"><\/td>\r\n    <td><input type=\"radio\" name=\"row-1\" data-col=\"2\"><\/td>\r\n    <td><input type=\"radio\" name=\"row-1\" data-col=\"3\"><\/td>\r\n<\/tr>\r\n<tr>\r\n    <td>Snickers<\/td>\r\n    <td><input type=\"radio\" name=\"row-2\" data-col=\"1\"><\/td>\r\n    <td><input type=\"radio\" name=\"row-2\" data-col=\"2\"><\/td>\r\n    <td><input type=\"radio\" name=\"row-2\" data-col=\"3\"><\/td>\r\n<\/tr>\r\n<tr>\r\n    <td>Butterfingers<\/td>\r\n    <td><input type=\"radio\" name=\"row-3\" data-col=\"1\"><\/td>\r\n    <td><input type=\"radio\" name=\"row-3\" data-col=\"2\"><\/td>\r\n    <td><input type=\"radio\" name=\"row-3\" data-col=\"3\"><\/td>\r\n<\/tr>\r\n<\/table><\/code><\/pre>\n
Our incredibly simple design can be accomplished with this CSS:<\/p>\n
table {\r\n    border-collapse: collapse;    \r\n}\r\ntd, th {\r\n    border: 1px solid #ccc;\r\n    padding: 10px;\r\n}\r\nth:empty {\r\n    border: 0;\r\n}<\/code><\/pre>\n
I wouldn’t have even posted that CSS except I think it’s a super useful case of the :empty<\/code> pseudo class selector.<\/p>\n
Now to grant the vertical group exclusivity, we’ll use a touch of jQuery:<\/p>\n
var col, el;\r\n\r\n$(\"input[type=radio]\").click(function() {\r\n   el = $(this);\r\n   col = el.data(\"col\");\r\n   $(\"input[data-col=\" + col + \"]\").prop(\"checked\", false);\r\n   el.prop(\"checked\", true);\r\n});<\/code><\/pre>\n
When a radio button is clicked, the column is determined and all other radio buttons in that column are turned off, then the clicked on is turned back on.<\/p>\n
That’s all there is to it.<\/p>\n
View Demo<\/a>   Download Files<\/a><\/p>\n
For the record, I did get this idea from the screencast I linked up earlier<\/a> in which this idea was briefly mentioned and then discarded. <\/p>\n
Also, I’d be interested to hear if people have alternate design pattern ideas for the “rate these three candy bars” thing. That’s always fun to think about.<\/p>\n
\n
1<\/sup> You could, instead, apply the data attributes through JavaScript programatically, or even calculate column on the fly as needed. As ever, there are more ways to kill a cat than choking it with butter<\/a>.<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"
Let’s say you were tasked with creating a UI in which users can rate three candy bars from their most to least favorite. A grid of radio buttons isn’t a terrible way to go about this.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":321721,"url":"https:\/\/css-tricks.com\/achieving-vertical-alignment-thanks-subgrid\/","url_meta":{"origin":14402,"position":0},"title":"Achieving Vertical Alignment (Thanks, Subgrid!)","date":"September 30, 2020","format":false,"excerpt":"Our tools for vertical alignment have gotten a lot better as of late. My early days as a website designer involved laying out 960px wide homepage designs and aligning things horizontally across a page using a 12-column grid. Media queries came along which required a serious mental shift. It solved\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/vertical-alignment-subgrid.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":331232,"url":"https:\/\/css-tricks.com\/yes-or-no\/","url_meta":{"origin":14402,"position":1},"title":"“Yes or No?”","date":"December 22, 2020","format":false,"excerpt":"Sara Soueidan digs into this HTML\/UX situation. \"Yes\" or \"no\" is a boolean situation. A checkbox represents this: it's either on or off (uh, mostly). But is a checkbox always the best UX? It depends, of course: Use radio buttons if you expect the answer to be equally distributed. If\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/form-ux-options.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":326279,"url":"https:\/\/css-tricks.com\/a-complete-state-machine-made-with-html-checkboxes-and-css\/","url_meta":{"origin":14402,"position":2},"title":"A Complete State Machine Made With HTML Checkboxes and CSS","date":"November 27, 2020","format":false,"excerpt":"State machines are typically expressed on the web in JavaScript and often through the popular XState library. But the concept of a state machine is adaptable to just about any language, including, amazingly, HTML and CSS. In this article, we\u2019re going to do exactly that. I recently built a website\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/state-management.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":311116,"url":"https:\/\/css-tricks.com\/radio-buttons-are-like-selects-checkboxes-are-like-multiple-selects\/","url_meta":{"origin":14402,"position":3},"title":"Radio Buttons Are Like Selects; Checkboxes Are Like Multiple Selects","date":"May 20, 2020","format":false,"excerpt":"I was reading Anna Kaley's \"Listboxes vs. Dropdown Lists\" post the other day. It's a fairly straightforward comparison between different UI implementations of selecting options. There is lots of good advice there. Classics like that you should use radio buttons (single select) or checkboxes (multiple select) if you're showing five\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/radio-checkbox-select.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14638,"url":"https:\/\/css-tricks.com\/group-design-project-rate-three-candy-bars-in-order\/","url_meta":{"origin":14402,"position":4},"title":"Group Design Project: Rate Three Candy Bars In Order","date":"October 17, 2011","format":false,"excerpt":"Last time we did a group design project, we did a list with functions and we got lots of interesting ideas. Then the other day I linked to a video of Ryan Singer, a tiny part of which inspired the idea of radio buttons with 2-way exclusivity. Then reader Erik\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":356895,"url":"https:\/\/css-tricks.com\/zero-trickery-custom-radios-and-checkboxes\/","url_meta":{"origin":14402,"position":5},"title":"Zero Trickery Custom Radios and Checkboxes","date":"November 17, 2021","format":false,"excerpt":"I feel like half of all \"custom-designed radio buttons and checkboxes\" do two things: Make them biggerColorize them I always think of SurveyMonkey for having big chunky radios and checkboxes. And indeed, just poking at their interface quickly, even internally, the app uses has those all over the place: SurveyMonkey's\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/chunky-checkboxes-radios.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/14402"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14402"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/14402\/revisions"}],"predecessor-version":[{"id":14414,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/14402\/revisions\/14414"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=14402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}