MW211 EXIT

devlog
jQuery/チェックボックスの必ずチェックチェック
2011年11月07日
チェックボックスのある画面で、どれかにチェックしてくれないと困るので
JavaScriptでエラーメッセージを出してガードする場面がある。

┌──────────────────────────────────────┐
│var check_flag = false;                                                     │
│var inputs = document.getElementsByTagName("input");                        │
│for (var i = 0; i < inputs.length; i++) {                                   │
│  if (inputs.item(i).type == "checkbox") {                                  │
│    if (inputs.item(i).getAttribute("checked")) {                           │
│      check_flag = true;                                                    │
│    }                                                                       │
│  }                                                                         │
│}                                                                           │
│if (!check_flag) {                                                          │
│  alert("チェックしてください。");                                          │
│  return false;                                                             │
│}                                                                           │
└──────────────────────────────────────┘
ま、こんな感じで、inputタグのcheckboxを全検索して、
フラグを使って判別したりする。

これがjQueryだとかなり簡単

inputタグ全部をチェックする場合(一応、例として)。
┌──────────────────────────────────────┐
│if (!$("input:checked")[0]) {                                               │
│  alert("チェックしてください。");                                          │
│  return false;                                                             │
│}                                                                           │
└──────────────────────────────────────┘

inputタグのcheckboxを全部チェックする場合(最初の例と同等、これでも十分か)。
┌──────────────────────────────────────┐
│if (!$("input:checked[type=checkbox]")[0]) {                                │
│  alert("チェックしてください。");                                          │
│  return false;                                                             │
│}                                                                           │
└──────────────────────────────────────┘

さらにname属性が「xxxx~」に絞り込む場合。
#「xxxx1、xxxx2…」「xxxx_1、xxxx_2…」、「xxxx[]」とかが該当
┌──────────────────────────────────────┐
│if (!$("input:checked[type=checkbox][name^=xxxx]")[0]) {                    │
│  alert("チェックしてください。");                                          │
│  return false;                                                             │
│}                                                                           │
└──────────────────────────────────────┘
これでも、かなり簡素にできる。
分類:jQuery