また今日もメモ代わりに。
やりたいことはタイトルのとおり。
言うたらよくあるやつなんだけど、なかなかうまい感じに検索で見つからないことがあるのでメモとして書いておく。
<!doctype html>
<html>
<head>
<meta charset=’utf-8′><script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js’></script>
<script language=’javascript’>
$(document).ready(function(){
// チェックした状態でページをリロードしたとき用
$(‘.checkgroup‘).each(function(){
var chk = $(this).attr(‘checked’);
if(chk == ‘checked’){
$(this).parent().css(‘background-color’,’pink’);
}else{
$(this).parent().css(‘background-color’,’white’);
}
});// チェック時
$(‘.checkgroup‘).click(function(){
var chk = $(this).attr(‘checked’);
if(chk == ‘checked’){
$(this).parent().css(‘background-color’,’pink’);
}else{
$(this).parent().css(‘background-color’,’white’);
}
return true;
});
});
</script>
<style>
label {display:block; padding:10px 30px; float:left; margin-right:10px;}
</style></head>
<body>
<p><label><input type=’checkbox’ class=’checkgroup‘ />選択肢1</label></p>
<p><label><input type=’checkbox’ class=’checkgroup‘ />選択肢2</label></p>
<p><label><input type=’checkbox’ class=’checkgroup‘ />選択肢3</label></p>
<p><label><input type=’checkbox’ class=’checkgroup‘ />選択肢4</label></p>
<p><label><input type=’checkbox’ class=’checkgroup‘ />選択肢5</label></p></body>
</html>
こんな感じ。
これを適当なエディタに張り付けて、クォーテーションを全部半角に置き換えたらOK・・・なはず。
いろんな全角クォーテーションに置き換わっちゃうようなのでお手数だけど置換をお願いします。
赤文字は対象とするチェックボックスのクラス名。
複数の選択肢グループでも、全部同じクラス名で大丈夫。
