まあ、択一選択にしたければ、最初からラジオボタンかセレクトボックスでフォームパーツを作ればいいのだが、場合によってはチェックボックスで択一選択のフォームを作りたいこともある。（多分そうそう機会はないと思うが）
例えばパラメタの都合上、各inputのname属性の値を別々にしたいときとか。
ラジオボタンでも、name属性の値が違えば、どちらもチェックできてしまう。
以下のようなチェックボックスのフォームが合った場合、
----------------------------------------------------------------------------------
<div class='parts_list'>
<table>
<tr>
<td>
<input type='checkbox' name='check_A' value='1'> 選択肢A
</td>
</tr>
</table>
<table>
<tr>
<td>
<input type='checkbox' name='check_B' value='1'> 選択肢B
</td>
</tr>
</table>
<table>
<tr>
<td>
<input type='checkbox' name='check_C' value='1> 選択肢C
</td>
</tr>
</table>
</div>
----------------------------------------------------------------------------------
これだと、そのままでは全てのチェックボックスにチェックを入れることができてしまうので、これをjQeryで制御する。
簡単にいえば、チェックされた以外のチェックボックスのチェックを外す。
以下が改良版。
----------------------------------------------------------------------------------
<script type="text/javascript" src='jquery.js'></script>
<script type="text/javascript">
$(function(){
$("div.parts_list table").each(
$("input:checkbox",this).click(
// チェックボックスをチェックした時のイベント開始
function(){
// 親要素（table）のセレクタ取得
var parent = $(this).closest("table");
// これより前のtableに対する処理
parent.prevAll().each(
function(){
// チェックを外す
$("input:checkbox",this).attr("checked",false);
}
);
// これより後ろのtableに対する処理
parent.nextAll().each(
function(){
// チェックを外す
$("input:checkbox",this).attr("checked",false);
}
);
// チェックボックスをチェックした時のイベント終了
}
) // click閉じ
) // each閉じ
)); // function閉じ
</script>
<div class='parts_list'>
<table>
<tr>
<td>
<input type='checkbox' name='check_A' value='1'> 選択肢A
</td>
</tr>
</table>
<table>
<tr>
<td>
<input type='checkbox' name='check_B' value='1'> 選択肢B
</td>
</tr>
</table>
<table>
<tr>
<td>
<input type='checkbox' name='check_C' value='1> 選択肢C
</td>
</tr>
</table>
</div>
----------------------------------------------------------------------------------
以上。
jqueryは便利だなーやっぱり。
