チェックボックス

先ほどの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');
	});
});