| id | name | address |
| 1 | 山田 | 東京都 |
| 3 | 鈴木 | 千葉県 |
| 6 | 高橋 | 北海道 |
| 12 | 佐藤 | 大阪府 |
| id | title | answer_type |
| 1 | あなたの身長 | テキスト入力 | 2 | あなたの体重 | テキスト入力 | 3 | 住居形態 | 択一選択 |
| id | shitsumon_id | sentakushi_name |
| 1 | 3 | 一戸建て |
| 2 | 3 | マンション |
| 3 | 3 | アパート |
| 4 | 3 | ダンボール |
| id | user_id | shitsumon_id | answer (テキスト入力の時はその値、 択一選択の時は選択肢ID) |
| 9 | 1（山田） | 1（身長） | 175(cm) |
| 10 | 1（山田） | 2（体重） | 68(kg) |
| 11 | 1（山田） | 3（住居形態） | 3（アパート） |
| 12 | 3（鈴木） | 1（身長） | 168(cm) |
| 13 | 3（鈴木） | 3（住居形態） | 1（一戸建て） |
| 14 | 6（高橋） | 2（体重） | 74(kg) |
| 15 | 6（高橋） | 3（住居形態） | 2（マンション） |
| 16 | 12（佐藤） | 1（身長） | 182(cm) |
| 17 | 12（佐藤） | 3（住居形態） | 3（アパート） |
| id | name | address |
| 1 | 山田 | 東京都 |
| 12 | 佐藤 | 大阪府 |
例えばパラメタの都合上、各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は便利だなーやっぱり。