jQuery Snippets #6

便利なtoggle系メソッド

例えば、jQueryを使って要素を非表示にしたいときは.hide()を、逆に表示させたいというときは.show()を使うことで要素の表示・非表示を行うことができ、classの追加・削除を行いたいときは.addClass()と.removeClass()を使うことでその動きを実装することができます。
それぞれで単独の動きを実装したいのであればそのまま上記を用いるのですが、これがクリックで表示・非表示を切り替えたいとか何らかのタイミングでclassの追加・削除を行いたいといったことをする際に便利なのがtoggle系のメソッドで、普段からそこまでjQueryを使わないという人でもこれに関しては覚えておいて損はないと思います。

以下でtoggle系メソッドを紹介していきますが、それぞれ実際を動きを見たいというときは下記HTMLと組み合わせて確認してもらうとより動きがわかりやすいかと思います。
説明時のサンプルコードもこのdt, ddを用いた形で説明していきます。

<dl>
  <dt>title</dt>
  <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dd>
</dl>

toggle()

.toggle()は、ざっくり説明すると表示させる.show()と非表示にさせる.hide()を組み合わせたものになります。
例えば下記のように記述することでdt要素をクリックした際にddが表示されていた場合は非表示に、逆にdt要素をクリックした際にddが非表示の場合は表示されるという動きになります。

$('dt').on('click', function() {
  $('dd').toggle();
});

ちなみに上記をそのまま記述した場合はパっと表示・非表示が切り替わりますが、.toggle('slow')や.toggle(1000)などのように記述することで表示・非表示の速度を指定することができます。
ただ、微妙な見栄えになるので個人的にはあまり指定することはありません...。

.slideToggle()

.slideToggle()は、要素をスライドしながら隠してくれる.slideUp()と要素をスライドしながら表示してくれる.slideDown()を組み合わせたものになり、よく見るアコーディオンの動きなどはこれを使うことで簡単に実装することができます。
例えば下記のように記述することでdt要素をクリックした際にddが表示されていた場合はスライドしながら非表示になり、逆にdt要素をクリックした際にddが非表示の場合はスライドしながら表示されるという動きになります。

$('dt').on('click', function() {
  $('dd').slideToggle();
});

.slideToggle()の場合は先ほどの.toggle()とは違って上記の記述方法だけでもちょっとしたアニメーションな感じになりますが、スライド時のスピードを任意で調整したい時は.slideToggle('slow')や.slideToggle(1000)のように記述することで調整可能です。

.fadeToggle()

.fadeToggle()は、要素をフェードアウトさせる.fadeOut()と要素をフェードインさせる.fadeIn()を組み合わせたものになります。
例えば下記のように記述することでdt要素をクリックした際にddが表示されていた場合はフェードアウトされ、逆にdt要素をクリックした際にddが非表示の場合はフェードインするという動きになります。

$('dt').on('click', function() {
  $('dd').fadeToggle();
});

こちらも上2つと同様で、.fadeToggle('slow')や.fadeToggle(1000)のように記述することでフェードするスピードを調整することが可能です。

.toggleClass()

.toggleClass()は、classを追加する.addClass()とclassを削除する.removeClass()を組み合わせたものになり、例えば下記のように記述することでdt要素をクリックした際に「open」というclassがdt要素についていない場合は追加され、逆についている場合はclassが削除されるという動きになります。

下記のサンプルコードは簡易的なアコーディオンを実装することができるものになり、単純なアコーディオンであれば上で紹介した.slideToggle()のみ使えばとりあえず実装できますが、アコーディオン展開時にdt要素の見栄えを変えたい時などにこの.toggleClass()が非常に便利で、CSSで「open」というclassに対してスタイルを予め指定しておけばdd要素の展開時に加えてdt要素の見栄えを変えるという動きを実装することができます。

$('dt').on('click', function() {
  $(this).toggleClass('open'); // ここが.toggleClass()を使用した記述
  $(this).next().slideToggle();
});

チェックボックスをまとめてチェックする

ひとつのチェックボックスにチェックするだけで、指定したチェックボックス全てにチェックされるようにする方法です。
それぞれ下記のようなHTMLとjQueryを記述することで実装でき、サンプルコードではまとめてチェックされてほしいチェックボックスの指定に$('input[name="foo"]')とname属性を使用していますが、それが嫌な場合はclassで指定したりもできます。

<input id="check-all" type="checkbox" /> Check All
<input type="checkbox" name="foo" /> Checkbox 1
<input type="checkbox" name="foo" /> Checkbox 2
<input type="checkbox" name="foo" /> Checkbox 3

$('#check-all').on('change', function() {
  $('input[name="foo"]').prop('checked', this.checked);
});

チェックされたら押下可能になるボタン

フォームの確認や送信ボタン上などでよく見かける、チェックが入っていたらボタンを押せるようにする動きを実装する方法で、それぞれ下記のようなHTMLとjQueryを記述することで実装できます。

<input id="check" type="checkbox" /><label for="check">チェックを入れたらボタンが押せる</label>
<input id="submit" type="submit" value="Submit" />

$('#submit').prop('disabled', true);
$('#check').on('change', function() {
  if ( $(this).prop('checked') == false ) {
    $('#submit').prop('disabled', true);
  } else {
    $('#submit').prop('disabled', false);
  }
});

数字を自動的にカンマ（,）区切りにする

金額を入力する箇所などで見やすくしたい場合や何からの理由で入力された数字を強制的にカンマ（,）区切りにしたい時に使える方法です。
下記のように記述することでカンマなしで数字を入力した場合でも、入力欄からフォーカスが外れると自動的にカンマ区切りされた状態で表示されるようになります。

$('input').blur(function() {
  num = $(this).val().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
  $(this).val(num);
});

数字のみ入力できるようにする

関係ないキーを無効化させて、指定した要素では数字しか入力できるようにする方法です。
実装には下記のように記述し、先ほどのものと併せて使うのもいいですね。

$('input').on('keypress', function(e) {
  if ( (e.which != 8) && (e.which != 0) && (e.which < 48 || e.which > 57) ) {
    return false;
  }
});

全角入力された英数字を半角に変換する

input要素内に全角で入力された英数字をフォーカスが外れたタイミングで半角に変換する方法で、実装には下記のように記述します。

$('input').blur(function() {
  var txt = $(this).val();
  txt = txt.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
  });
  $(this).val(txt);
});

半角入力された英数字を全角に変換する

先ほどとは逆にinput要素内に半角で入力された英数字をフォーカスが外れたタイミングで全角に変換する方法で、実装には下記のように記述します。

$('input').blur(function() {
  var txt = $(this).val();
  txt = txt.replace(/[A-Za-z0-9]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
  });
  $(this).val(txt);
});

input要素にreadonlyやdisabledを指定する

jQueryを使ってinput要素にreadonlyやdisabledといった属性を指定したい場合は、それぞれ下記のように記述することで実装できます。

// readonly属性を付加
$('input').prop('readonly', true);

// disabled属性を付加
$('input').prop('disabled', true);

現在入力されている文字数を表示する #1

指定した要素内（このサンプルではtextarea）に、現在何文字入力されているのかを表示させる方法です。
実装には下記のように記述し、ここでは文字数を表示させる箇所（<p>現在の文字数：<span class="count">0</span></p>の部分）もjQueryを利用して表示させていますが、もちろん普通にHTMLに書いて要素だけ指定する形でも問題ありません。

$('textarea').after('<p>現在の文字数：<span class="count">0</span></p>');
$('textarea').on('keydown keyup change', function() {
  var txtLength = $(this).val().length;
  $('.count').text(txtLength);
});

現在入力されている文字数を表示する #2

先ほどのものに＋αしたもので、現在入力されている文字数をに加えて上限数も表示させ、更に上限数をオーバーした場合にちょっとしたメッセージを表示するというものです。
（念のため記載しておくと、上限数以上は入力できないといった動きではないです）

実装には下記のように記述し、var limitの箇所で文字の上限数を指定するようになっています。

var limit = 100;
$('textarea').after('<p>現在の文字数：<span class="count">0</span> / <span class="limit">' + limit + '</span></p><div class="over">文字数オーバーです</div>');
$('.over').css('color', 'red').hide();

$('textarea').on('keydown keyup change', function() {
  var txtLength = $(this).val().length;
  $('.count').text(txtLength);
  if( txtLength > limit ) {
    $('.count').css('color', 'red');
    $('.over').show();
  } else {
    $('.count').css('color', '');
    $('.over').hide();
  }
});

こちらも先ほどと同様で.after()を用いてカウント表示する場所などを表示させていますが、普通にHTMLに書く形でも実装できますし、.css()に関しても.addClass()などでclassを付加させる形にして見栄えはスタイルシートを使うようにすれば多少はスッキリした記述になると思います。