Take the 2-minute tour ×

I need to group checkbox together but in 2 columns. In the image below ive created 2 different fieldsets. I know this isnt very semantic but it displays the layout I want to achieve.

enter image description here

Is there a standard jQuery Mobile way to do this?

I want the checkboxes to look like they belong in one section. I could remove the rounded corder of green top left, pink bottom left and blue bottom right. Do I need to use standard CSS overrides for this or is there a more elegant way? Thanks

share|improve this question
Are you asking how to even get two columns? Or just how to remove the rounded corners on the interior side of the columns? Or both? –  Todd Apr 26 '12 at 12:41

2 Answers 2

up vote 3 down vote accepted

I think you want to look at Layout Grids: http://jquerymobile.com/test/docs/content/content-grids.html

<div class="ui-grid-a">
    <div class="ui-block-a">
             <label><input type="checkbox" name="checkbox-1" /> Any</label>
             <label><input type="checkbox" name="checkbox-1" /> Red </label>
    <div class="ui-block-b">
             <label><input type="checkbox" name="checkbox-1" /> Green </label>
             <label><input type="checkbox" name="checkbox-1" /> Black </label>
</div><!-- /grid-a -->


Based on your comment, no you cannot have two separate columns grouped into one fieldset.

The data-role="controlgroup" on a fieldset removes the margins and padding to give the grouped effect, but what you end up with is something like this: http://jsfiddle.net/shanabus/qNYPh/1/

However, if you are ok with one parent fieldset and two nested, grouped, fieldsets... then you can end up with a solution like this: http://jsfiddle.net/shanabus/hcyfK/1/

share|improve this answer
I can use those to create columns but I want to work with a single fieldset and radio buttons so I can have the styling used in the image in my question. It doesnt look like layout grids can do this. Thanks –  jdln Apr 26 '12 at 13:36
check out my updated answer, the last jsfiddle link provides a working solution I think. –  shanabus Apr 26 '12 at 14:03
This was just what I needed. Thanks! +1'd –  Deses Apr 12 '13 at 11:15

shanabus gave a good answer with his nested grouped solution: http://jsfiddle.net/shanabus/hcyfK/1/

You can take that one step further by setting/overriding the appropriate css 'border radius' values to zero for any corner you need to in order to get rid of the touching rounded corners and achieve a more consistent appearance.

As per the example:

<label for="radio-choice-1" style="border-top-right-radius: 0">Cat</label>
<label for="radio-choice-2" style="border-bottom-right-radius: 0">Dog</label>
<label for="radio-choice-3" style="border-top-left-radius: 0">Hamster</label>
<label for="radio-choice-4" style="border-bottom-left-radius: 0">Lizard</label>

Yes, I am a bad person because I didn't separate html & css but it's an example. :-)

share|improve this answer

Your Answer


