cssオンリーの場合

demo

まずはcssのみでやってみます。
隣接セレクターやcheckedセレクターを使用している関係でieでは動きません。 

	<div class="check-group clearfix">
		<div>
			<input id="checkbox1" type="checkbox" name="check[]" value="c1" />
			<label for="checkbox1">Checkbox 1</label>
		</div>
		<div>
			<input id="checkbox2" type="checkbox" name="check[]" value="c2" />
			<label for="checkbox2">Checkbox 2</label>
		</div>
		<div>
			<input id="checkbox3" type="checkbox" name="check[]" value="c3" />
			<label for="checkbox3">Checkbox 3</label>
		</div>
	</div>

css

	div.check-group input {
		display: none;
	}
	div.check-group label {
		cursor: pointer;
		padding: 5px 10px;
		float: left;
		border: solid 1px #aaa;
		margin-left: -1px;
		background: #eee;
	}
	div.check-group input:checked+label {
		color: #fff;
		background: #C3C3C3;
	}

「input」を「display: none」にすればチェックボックスを非表示にできますので、あとは「input:checked+label」でチェック時のスタイルを設定するだけです。

ラジオボタンも基本的にはcheckboxをradioに変更するだけで動きます。

jQueryを使用した場合

demo

ieに対応するためにcssハックなどでieだったらチェックボックスを表示などしてもいいと思います。
ここではjQueryを使用してクラスを割り当てることで、ボタンのON/OFFを再現する方法をご紹介します。

チェックボックス

先ほどのcssの場合は「:checked」の疑似クラスでしたが、今回は「.checked」普通のクラスにします。

css

		div.check-group label.checked {
			color: #fff;
			background: #C3C3C3;
		}

toggleイベントを使用すると通常のチェックが機能しなくなるっぽいので、「attr(‘checked’,’checked’)」でjsの方でチェックします。

javascript

$(function(){
	//checkedだったら最初からチェックする
	$('div.check-group input').each(function(){
		if ($(this).attr('checked') == 'checked') {
			$(this).next().addClass('checked');

		}
	});
	//クリックした要素にクラス割り当てる
	$('div.check-group label').click(function(){
		if ($(this).hasClass('checked')) {
			$(this)
				.removeClass('checked')
				.prev('input').removeAttr('checked');
		} else {
			$(this)
				.addClass('checked')
				.prev('input').attr('checked','checked');
		}
	});
});

ラジオボタン

ラジオボタンはinput要素を「display: none」とするとieでは動作しないようです。
なので、透明度を0（opacity: 0）にすることで擬似的に非表示にします。
cssで設定してもいいですが、ここではjQueryで設定します。

html

		<div class="radio-group clearfix">
			<div>
				<input id="Radio1" type="radio" class="radio" name="radio" value="r1" />
				<label for="Radio1">Radio 1</label>
			</div>
			<div>
				<input id="Radio2" type="radio" class="radio" name="radio" value="r2" />
				<label for="Radio2">Radio 2</label>
			</div>
			<div>
				<input id="Radio3" type="radio" class="radio" name="radio" value="r3" />
				<label for="Radio3">Radio 3</label>
			</div>
		</div>

opacity は要素が透明になっているだけなので、ボタンを横並びにする場合 position を使用してうまいことやりましょう。

css

		div.radio-group div {
			position: relative;
		}
		div.radio-group input {
			position: absolute;
			left: 0px;
			outline:none;
		}

jQueryではボタンをクリックすると、全てのラベルを removeClass してから、クリックしたボタンに addClass でクラスを割り当ててます。

javascript

$(function(){
	var radio = $('div.radio-group');
	$('input', radio).css({'opacity': '0'})
	//checkedだったら最初からチェックする
	.each(function(){
		if ($(this).attr('checked') == 'checked') {
			$(this).next().addClass('checked');
		}
	});
	//クリックした要素にクラス割り当てる
	$('label', radio).click(function() {
		$(this).parent().parent().each(function() {
			$('label',this).removeClass('checked');	
		});
		$(this).addClass('checked');
	});
});