JavaScript

【jQuery】selectボックス全選択機能装備

2013年11月21日

selectボックスはmultipleの属性を与えると複数選択可能になります。

ネットで探してもselectボックスのmultipleの全選択処理が見つからなかったので作ってみました。

eachを使うことでselectボックスのoption全ての値を取り出すことが可能みたいです。

仕様

全選択のチェックボックスを用意し、チェックにより全選択・解除が可能。

セレクトボックスの値が全て選択されてたら自動的に全選択チェックボックスにチェックが入る。

応用でonloadとかに処理できるようにすれば読込直後の判断にも使えそうです。

ソース

$(document).ready(function () {
  $("#test_check").click(function () {
    if ($(this).prop("checked")) {
      //全て選択
      $('#test option').prop("selected", true);
      //eachで設定も可（サンプルはattrだがpropでも可）
      //$('#test option').each(function(){
      // $(this).attr("selected",true);
      /});
    } else {
      //全て解除
      $('#test option').prop("selected", true);
      //eachで設定も可（サンプルはattrだがpropでも可）
      //$('#test option').each(function(){
      // $(this).attr("selected",false);
      //});
    }
  });
  $("#test").change(function () {
    var test_ck_len = $('#test').children().length;
    var j = 0;
    $('#test option').each(function () {
      if ($(this).prop("selected")) {
        j++;
      }
    });
    if (j == test_ck_len) {
      $("#test_ck").attr("checked", true);
    } else {
      $("#test_ck").attr("checked", false);
    }
  });
});
全選択<input id="test_check" type="checkbox" name="test_check" />
<br/> 
<select id="test" multiple="multiple" name="test">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
</select>

実装サンプル

全選択

-JavaScript
-, , ,