Result
http://jsfiddle.net/kachibito/TWCE5/embedded/result,js,css,html
jQuery
//チェックが入ってるのは背景色追加 $(":checked").parent().css("background","#f3f365"); //クリックイベント発火 $("input").click(function(e) { var t = e.target.type; var chk = $(this).prop('checked'); var name = $(this).attr('name'); チェックが入ったか入ってないかで条件分岐 if(t == 'checkbox') { if(chk == true){ $(this).parent().css('background', '#f3f365'); } else { $(this).parent().css('background-color', ''); } return true; //ラジオボタン } else if(t == 'radio') { if(chk == true){ $("input[name=" + name + "]").parent().css("background-color",""); $(this).parent().css("background","#f3f365"); } return true; } });
css
li{ float:left; margin:20px; } label{padding:5px;} ul{width:420px;}
html
<ul> <li><label><input type="checkbox" />チェック1</label></li> <li><label><input type="checkbox" />チェック2</label></li> <li><label><input type="checkbox" />チェック3</label></li> </ul> <ul> <li><label><input type="radio" name="test" />ラジオ1</label></li> <li><label><input type="radio" name="test" />ラジオ2</label></li> <li><label><input type="radio" name="test" />ラジオ3</label></li> </ul>