Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。
| |
 |
 |
管理画面などの作業が非常に複雑に
|
 |
大量の投稿記事や個人情報をデータベース管理するようなサイトでは、「検索結果で洗い出されたデータをすべて選択・消去する」といった操作を管理画面で要求するケースがよくある。
このような場合、管理者はその都度すべてのチェックボックスに手動でチェックを入れねばならず、管理業務の負担が増大するうえ、入力ミスが頻発する原因になることも。しかし、管理画面の設計当初は、そこまでのデータベース件数を見込んでいなかったりして、あとからそのような事態の対応を迫られることも多い。
ここでは、簡単な作業でチェックボックス一括制御を可能にする方法を紹介する。
まず、＜head＞タグ内に【1】のJavaScriptを記述し、次に＜form＞タグ内のボタンなどを【2】のように記述する。こうすることで、複数のチェックボックスを一度にチェック・解除することが可能だ。Movable Typeではスパムコメント投稿の管理が重要な問題となるので、このような機能は重宝する【3】。
このような場合、管理者はその都度すべてのチェックボックスに手動でチェックを入れねばならず、管理業務の負担が増大するうえ、入力ミスが頻発する原因になることも。しかし、管理画面の設計当初は、そこまでのデータベース件数を見込んでいなかったりして、あとからそのような事態の対応を迫られることも多い。
ここでは、簡単な作業でチェックボックス一括制御を可能にする方法を紹介する。
まず、＜head＞タグ内に【1】のJavaScriptを記述し、次に＜form＞タグ内のボタンなどを【2】のように記述する。こうすることで、複数のチェックボックスを一度にチェック・解除することが可能だ。Movable Typeではスパムコメント投稿の管理が重要な問題となるので、このような機能は重宝する【3】。
| ＜script type="text/javascript"＞ ＜!-- var count; function CboxCtl(check){ for(count = 0; count ＜ document.test.f.length; count++){ document.test.f[count].checked = check; } } //--＞ ＜/script＞ |
【1】＜head＞タグ内にこのように記述する
| ＜form name="test"＞ ＜input type="checkbox" name="f" value="選択肢A"＞選択肢A ＜input type="checkbox" name="f" value="選択肢B"＞選択肢B ＜input type="button" onClick="CboxCtl(true);" value="全て選択"＞ ＜input type="button" onClick="CboxCtl(false);" value="全て解除"＞ ＜/form＞ |
【2】＜head＞タグ内にこのように記述する
 |
【3】ページヘッダ部分で投稿をソートし、ページ下部で「すべて選択」と「解除」が行える
解説：横山 剛
（※本文中、及びキャプション内で使用している「＜」、「＞」は、全角になります。ご注意ください。）
