jQueryでチェックされたcheckboxの値を取得したり設定する方法

2019 9/20

2019.09.20

画面上で何か入力されたとき、jQueryを使って表示を切り替えたり何かしらのイベントを動作させたい場合があると思います。

今回はチェックボックスにチェックが入った場合に値を取得し、動作を切り替える方法です。

チェックボックスはON・OFFの切り替えや、一覧の中から複数の項目を選択する場合などに使います。

1件だけならまだ簡単ですが、複数チェックされた場合はどのように取得できるのか。

実際にやってみます。

jQueryでチェックされたcheckboxの値を取得する方法

チェックされたチェックボックスの値を取得するには、セレクタで指定した要素に :checked を付与します。

次のサンプルは、「実行」ボタンを押すとチェックボックス(checkboxname1)の値を取得し表示するものです。

チェックしていればチェックボックスの値の val1 が表示されます。

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js?ver=1.12.2'></script>
<script type="text/javascript">
  $(function(){
    $('#btn').click(function() {
      var v = $('input[name=checkboxname1]:checked').val();
      alert(v);
    });
  });
</script>
<input type="checkbox" name="checkboxname1" id="checkboxid1" value="val1">
<input type="button" value="実行" id="btn">

チェックボックスが複数ある場合

チェックボックスを複数に増やしてみました。

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js?ver=1.12.2'></script>
<script type="text/javascript">
  $(function(){
    $('#btn').click(function() {
      var v = $('input[name=checkboxname1]:checked').val();
      alert(v);
    });
  });
</script>
<input type="checkbox" name="checkboxname1" id="checkboxid1" value="val1">
<input type="checkbox" name="checkboxname1" id="checkboxid2" value="val2">
<input type="checkbox" name="checkboxname1" id="checkboxid3" value="val3">
<input type="button" value="実行" id="btn">

この場合もチェックしたチェックボックスの値を取得できるのですが、チェックしたチェックボックスの最初の要素しかとれません。

例えば2個目と3個目にチェックした場合は val2 だけが表示されるということです。

チェックした要素全ての値を取得する場合には each を使い次のように書きます。

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js?ver=1.12.2'></script>
<script type="text/javascript">
  $(function(){
    $('#btn').click(function() {
      $('input[name=checkboxname1]:checked').each(function() {
        var v = $(this).val();
        alert(v);
      });
    });
  });
</script>
<input type="checkbox" name="checkboxname1" id="checkboxid1" value="val1">
<input type="checkbox" name="checkboxname1" id="checkboxid2" value="val2">
<input type="checkbox" name="checkboxname1" id="checkboxid3" value="val3">
<input type="button" value="実行" id="btn">

これでチェックしたチェックボックスを全てループでまわしてくれます。

チェックボックスがチェックされているかどうかを判定したい場合

チェックボックスの値を取得して、値が取得されていればチェックされている・・・というのでもいいですが、もっといい方法があります。

それは prop() を使ってチェックされているかを判定する方法です。

$(チェックボックスのセレクタ).prop(“checked”) でチェックされているかどうかが返ってきます。

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js?ver=1.12.2'></script>
<script type="text/javascript">
  $(function(){
    $('#btn').click(function() {
      if ($('input[name=checkboxname1]').prop("checked")) {
        alert('チェックされてる');
      } else {
        alert('チェックされてない');
      }
    });
  });
</script>
<input type="checkbox" name="checkboxname1" id="checkboxid1" value="val1">
<input type="button" value="実行" id="btn">

上の例では実行ボタンをクリックしたらチェックされてるか判定するようになっていますが、チェックしたタイミングで実行する場合は

$('#btn').click(function() {

の部分を

$('input[name=checkboxname1]').change(function() {

のようにchange()を使えばできます。

jQueryでチェックボックスにチェックを入れたり外したり

jQueryを使ってチェックボックスにチェックを入れたり、外したりする方法です。

今回は実行ボタンを押したとき、チェックされていなければチェックし、チェックされている場合にはチェックを外すようなものを作ってみました。

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js?ver=1.12.2'></script>
<script type="text/javascript">
  $(function(){
    $('#btn').click(function() {
      if ($('input[name=checkboxname1]').prop("checked")) {
        $('input[name=checkboxname1]').prop("checked", false);
      } else {
        $('input[name=checkboxname1]').prop("checked", true);
      }
    });
  });
</script>
<input type="checkbox" name="checkboxname1" id="checkboxid1" value="val1">
<input type="button" value="実行" id="btn">

$(‘#btn’).click(function() { でボタンをクリックしたことを判定。

if ($(‘input[name=checkboxname1]’).prop(“checked”)) { チェックボックスにチェックがあるかどうかを判定。

$(‘input[name=checkboxname1]’).prop(“checked”, false); でチェックを外す。

$(‘input[name=checkboxname1]’).prop(“checked”, true); でチェックを入れる。

になります。