Result
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> |
