Blog

※ブログ移転しました。 → hamashun.me

JS習作:チェックボックスの一括チェック・解除

概要

12月1週目のJavaScriptです。仕事で似たような物を使う機会があったので、それをまとめてみました。 やりたかった事は以下です。

  • チェックボックスのチェックを、まとめてオンオフしたい
  • オンオフはそれぞれに専用のボタンがあるんじゃなくて、一つにしたい

ソースコード

jQueryを使用しています。

$(function () {
  var checkBoxs = $('input.checkbox');
  $('#allCheck').click(function(){
    if(this.checked) {
      checkBoxs.attr('checked', 'checked');
    } else {
      checkBoxs.removeAttr('checked');
    }
  });
});

学んだ事や雑感

仕様決めの時点的な事

最初は、ボタンでトグルするようにオンオフをしようと思っていたのだけど、それだとオンになるのかオフになるのかがわかりづらいし、オンオフが混在している場合にはどういう動作になるかが微妙だった。

ので、「全てチェック用のチェックボックス」を用意してそれに合わせる事にした。

Contribution Form

Blog Search
Search
Recent Entry
Category
Monthly Archive