Skip to content

Instantly share code, notes, and snippets.

Forked from edersohe/example.html
Last active December 12, 2015 18:49
Show Gist options
  • Save BMeyerKC/4811137 to your computer and use it in GitHub Desktop.
Save BMeyerKC/4811137 to your computer and use it in GitHub Desktop.
Vertical Button Set for jQuery UI
<link rel="stylesheet" media="all" href=""></link>
<script src=""></script>
<script src=""></script>
<script src="jquery.buttonsetv.js"></script>
//call plugin
<style type="text/css">
body{ font: 70% "Trebuchet MS", sans-serif; margin: 50px;}
<h2> Radio Buttonset </h2>
<div id="radio">
<input type="radio" id="radio1" name="radio" value="1"/><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" value="2"/><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" value="3"/><label for="radio3">Choice 3</label>
<h2> Checkbox Buttonset </h2>
<div id="checkbox">
<input type="checkbox" id="check1" name="check" value="1"/><label for="check1">Choice 1</label>
<input type="checkbox" id="check2" name="check" value="2"/><label for="check2">Choice 2</label>
<input type="checkbox" id="check3" name="check" value="3"/><label for="check3">Choice 3</label>
(function( $ ){
//plugin buttonset vertical
$.fn.buttonsetv = function() {
$(':radio, :checkbox', this).wrap('<div style="margin: 1px"/>');
$('label:first', this).removeClass('ui-corner-left').addClass('ui-corner-top');
$('label:last', this).removeClass('ui-corner-right').addClass('ui-corner-bottom');
var mw = 0; // max witdh
$('label', this).each(function(index){
var w = $(this).width();
if (w > mw) mw = w;
$('label', this).each(function(index){
})( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment