jQuery – チェックボックスがチェックされたらスタイルを変更する
なんか久々にjQueryを触りました…。
セレクタ（属性フィルタ）に変数の値を利用する場合の記述を試したんですが、1.3.1はセレクタまわりが変更になっているからなのか、IE6,7、FirefoxでOKだったのですが、safariが動作せず。
で、ちょこっと調べてみると jQuery 1.3系からはsafari2は対応してないと。そういうことですか…。
jQuery: » jQuery 1.3.1 Released
ブラウザーのシュアの問題で対応をはずしてるみたいですね。しかし下記ページを見てsafari3.xが6%近いシェアがあるってのでびっくり。safariってそんなにも使ってる人いるんですかね？
まあ一応safari2.xもOKなように1.2.6を使っておきました。
作ったものはというと、チェックボックスにチェックをした時に文字のスタイルを変更するというもの。
ソースは以下。
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>jQuery - checkされたら文字を装飾する</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script language="JavaScript">
$(function(){
//リロード対応用
//checked=tureのものすべて取得
$("#chkform :checked").each(function(){
//checkboxのidを取得
var isl = $(this).attr("id");
//labelに対しスタイル追加
$("label[for="+isl+"]").css({"font-weight":"bold","color":"red"});
});
//checkboxがクリックされたら…
$("#chkform :checkbox").click(function() {
//checkboxのidを取得
var isl = $(this).attr("id");
if($(this).attr('checked') == true) {
//checked=tureであればスタイル追加
$("label[for="+isl+"]").css({"font-weight":"bold","color":"red"});
} else {
//checked=tureでなければスタイルを空に
$("label[for="+isl+"]").css({"font-weight":"","color":""});
}
});
});
</script>
</head>
<body>
<h1>jQuery - checkされたら文字を装飾する</h1>
<p>好きな動物は？（複数選択可）</p>
<form id="chkform">
<table>
<tr>
<td><input type="checkbox" name="chk[]" value="1" id="chk1"></td>
<td><label for="chk1">犬</label></td>
</tr>
<tr>
<td><input type="checkbox" name="chk[]" value="2" id="chk2"></td>
<td><label for="chk2">猫</label></td>
</tr>
<tr>
<td><input type="checkbox" name="chk[]" value="3" id="chk3"></td>
<td><label for="chk3">鳥</label></td>
</tr>
<tr>
<td><input type="checkbox" name="chk[]" value="4" id="chk4"></td>
<td><label for="chk4">パンダ</label></td>
</tr>
<tr>
<td><input type="checkbox" name="chk[]" value="5" id="chk5"></td>
<td><label for="chk5">トラ</label></td>
</tr>
<tr>
<td><input type="checkbox" name="chk[]" value="6" id="chk6"></td>
<td><label for="chk6">ライオン</label></td>
</tr>
</table>
</form>
</body>
</html>
チェックされたcheckboxのidを取得し、割り当てられたlabelに対してスタイルを追加しています。スタイルシートをつけるとソースが長くなるので、あえて「.css」を使っています。
セレクタ（属性フィルタ）に対して変数を割り当てる方法がわかっていなかったのですが、変数以外を「”」で囲む「$(“[属性=”+変数+”]”)」でいけるようです（なんか無理矢理な感じがするけど…）。
フォームのradio、checkboxは選択してもわかりにくいことが多いので、少し手を加えてやるだけでわかりやすくなると思います。
CSS3も「:checked」はありますが、実用には最短3年ぐらい（IE6,7が少なくなる）と考えると、jQueryとかで補っていった方がいいですね。
しかしずいぶんjQuery触ってないので、また練習がてらなにか作らねば。
参考ページ
jQueryのセレクタ 属性フィルタ1 – ［JavaScript］All About