複数のチェックボックスの一括チェック/解除などのコントロール

2005/08/26 14:59

このQ&Aのポイント

PHPに渡すために、1月から12月の値を検索条件として選択するチェックボックスのコントロールを実装する方法を教えてください。
特定のチェックボックスを選択した場合に、関連する他のチェックボックスも自動的に選択または解除する仕組みを作成する方法を教えてください。
通年、上半期、下半期のいずれかが選択されている間は他のチェックボックスを無効化し、選択が解除された場合には全てのチェックボックスを有効にする方法を教えてください。

litton101
お礼率89% (1106/1240)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

leaz024
ベストアンサー率75% (398/526)

2005/08/26 18:59 回答No.1

検索に必要なのは「月」であって、通年や上・下半期はあくまでその「入力補助」ですよね？となると、disabled で入力できない状態を作ってしまうのは、ユーザーにとって不便に思います。また、月側のチェックと補助側のチェックが完全に連動するようにし、例えば手入力で1～6月までをチェックしたら「上半期」も自動的にチェックされる、という具合にすると、直感的で分かりやすいのではないかと思います。ご質問の意向とは違ってしまっているかも知れませんが、上記のサンプルを作ってみたので掲載します。少しでも参考になれば幸いです。 # JavaScript部 function checkMonthctl(obj) { 　　var months = obj.form["month[]"]; 　　switch (obj.value) { 　　case "all": 　　　　for (var i = 0; i < 12; i++) { 　　　　　　months[i].checked = true; 　　　　} 　　　　break; 　　case "1sthalf": 　　　　for (var i = 0; i < 6; i++) { 　　　　　　months[i].checked = true; 　　　　　　months[i+6].checked = false; 　　　　} 　　　　break; 　　case "2ndhalf": 　　　　for (var i = 0; i < 6; i++) { 　　　　　　months[i].checked = false; 　　　　　　months[i+6].checked = true; 　　　　} 　　　　break; 　　case "clear": 　　　　for (var i = 0; i < 12; i++) { 　　　　　　months[i].checked = false; 　　　　} 　　　　setMonthctls(obj.form.monthctl); 　　　　break; 　　} } function checkMonth(obj) { 　　var months = obj.form["month[]"]; 　　var value, state = 0; 　　for (var i = 0; i < 12; i++) { 　　　　if (months[i].checked) state |= 1 << i; 　　} 　　switch (state) { 　　case 07777: value = "all";　　　　 break; 　　case 00077: value = "1sthalf";　　break; 　　case 07700: value = "2ndhalf";　　break; 　　} 　　setMonthctls(obj.form.monthctl, value); } function setMonthctls(monthctls, value) { 　　for (var i = 0; i < monthctls.length; i++) 　　　　monthctls[i].checked = monthctls[i].value == value; } # HTML部 <input type="checkbox" name="month[]" value="200501" onclick="checkMonth(this)">2005年1月<br> <input type="checkbox" name="month[]" value="200502" onclick="checkMonth(this)">2005年2月<br> 　　　　中略 <input type="checkbox" name="month[]" value="200511" onclick="checkMonth(this)">2005年11月<br> <input type="checkbox" name="month[]" value="200512" onclick="checkMonth(this)">2005年12月<br> <input type="radio" name="monthctl" value="all" onclick="checkMonthctl(this)">通年 <input type="radio" name="monthctl" value="1sthalf" onclick="checkMonthctl(this)">上半期 <input type="radio" name="monthctl" value="2ndhalf" onclick="checkMonthctl(this)">下半期 <input type="button" name="monthctl" value="clear" onclick="checkMonthctl(this)">　　　　　　※ <br> ※通年および上・下半期は排他的な性質を持つので、ラジオボタンとしました。 ※全部の「月」のチェックを外す「clear」ボタンはオマケです。外しても問題なく動きます。 ※インデントなどに全角空白を使っているので、コピーする場合はタブなどに置き換えて下さい。

質問者

お礼 2005/08/27 00:40

leaz024さん、すばらしいスクリプトありがとうございました！！動作確認も完璧でした。ラジオボタンでコントロールという発想がなかったようです。ところで、Clearボタンですが、ボタンでなく、ラジオボタングループの仲間にできますでしょうか？検索フォームのSubmitボタンの隣にもクリア（リセット）ボタンを配置する関係で、たとえクリア対象が違っていても、ボタンでなくラジオボタンの仲間のほうがなじみそうです。あつかましい追加要望で恐縮ですが、よろしければご教示いただけますと幸いです、よろしくお願いします。

質問者