カテゴリー: jQuery

jQueryでチェックボックスの値を配列に格納・削除する方法

Posted on by asukaru

どっがーん！！！

佐賀県神埼市は非常に強い夕立（昼ダチ？？）をいただきました。久しぶりに雷雨。明日は晴れて欲しいです。また、台風も来ていますね。現在も神埼市は大雨です。

佐賀県は全体的に平野なので夕立などは非常に激しく、稲光も当然のごとく空から地面に突き刺さります。容赦ない感じがもともと大分県民だった私には驚きでした。私の地元の大分県では、雷音だけでも相当珍しいのです。それが稲光が激しいのって、半端ではありません。

 

ところで、表題の件ですが、jQueryでチェックボックスの値を配列に格納するのはよくあること。けれども、チェックしてchecked状態になっているチェックボックスのチェックを外した時に、そのデータを操作するというものはあまり見かけませんでした。

そこで、今日はこちらを準備しました。

jQueryでチェックボックスの値を配列に格納・削除する方法

 

いくつか前提にしなければならないことがあるのですが、チェックボックスの実装イメージとしては、下記写真のような感じです。

複数のチェックボックスの値を取得・削除する方法||　佐賀県神埼市アスカル

 

お気付きの方は。これがEC-CUBEであるということを察知されたことでしょう。

それはいいのですが、要はこのようにデーターベースに登録されている情報をIDなどの主キーを一緒に取得してきて吐き出している状態です。この前提が抜けてしまうと思っていた挙動をしないということもあるかと思います。

そして、今回は結構な力技をも用います。

 

HTML側

まず、HTML（テンプレート側）ですが

<td rowspan="2">
    <input type="checkbox" name="direct_delivery" value="1" id="direct_delivery_<!--{$arrResults[cnt].c＿id}-->"/><label for="direct_delivery_<!--{$arrResults[cnt].c_id}-->">1</label>
</td>

 

と、テーブルを作成して、inputタグのid部分にはここではc_idとしておきます。上のはEC-CUBEのものをそのままなので。テンプレートエンジンにSmartyが使用されているため初見の方には馴染みがないかもしれません。

実際に簡単なHTMLを記述するとなると、

<table>

<tr>

 <td>

  <input type="checkbox" value="1" id="order_<?php echo htmlspecialchars($id, ENT_QUOTES, 'utf-8'); ?> >1（任意値）

 </td>

</tr>

</table>

 

という具合になるかと思います。このIDのところがPOINTですね。

 

jQuery側

 

<script>
  var idArray = [];　−❶
  $('#direct_delivery_<!--{$arrResults[cnt].c_id}-->').on('click',function(){　−❷
  if ( $(this).prop('checked') == true ) {　−❸
    var idname = $(this).attr("id");
    idArray.push(idname);
    console.log(idArray);
 } else {
    var idname = $(this).attr("id");
    for(i=0; i<idArray.length; i++){　−❹
      if(idArray[i] == idname){
        idArray.splice(i, 1);
      }
    }
    console.log(idArray);
  }
});
</script>

 

jQuery側は、このようにまず❶の部分で空の配列を作っておきます。後々この配列の中へチェックボックスでチェックを入れたり外したりする時の値を入れていきます。

次に、イベント発生は❷の部分で、今回はチェックボックスのIDを用いて指定をしていきました。こちらもテンプレートエンジンとの関係で、IDの指定をするのに波括弧を使用しておりますが、適宜ID名を指定してください。なお、勘の良い人はこの時点で気づくかと思いますが、このc_idは、実際にはPHPのループ文の中で使用されます。そのため、この記述をそのままテンプレートの下に貼り付けると、展開されるコードが冗長になります。

ここは各システム内部の話になるのでどのように書くかはそのシステムごとに異なるとしか言いようがないです。

 

特に、inputタグのvalue属性とID値とが関連している場合には、このようなコードを書く必要がないこともあると思います。

 

何れにしても、❸の部分で条件分岐をしているのですが、trueの時はチェックがされた時、falseはチェックが外された時です。それぞれ、初期値が空の配列の中にデーターを格納したり、削除したりしています。ところで、Pythonなどとは異なり、jQueryの世界では値で配列内の特定の値を削除するということが組み込み関数ではできないみたいです。

 

そのため、❹ループ処理を使って配列の中身を検索して該当するものを削除する処理を記述しています。

 

 

 

以上が、今回のjQueryを使用したチェックボックスのチェック状態に応じてデーターを取得する方法についての実装です。

先にも触れましたが、それぞれのシステムに応じて異なることになるので実装される際にはソースが適宜変更になると思いますので、その点だけご容赦ください。

 

 

神埼は大雨ですが

 

 

この大雨は明日まで継続するらしいです。でも、これでようやく梅雨明けかもしれないですね。

それでは、今後も開発頑張っていきましょう！

 

 

佐賀県神埼市でWEBシステム、AI、IoT、IOS、Androidアプリ開発

-*–　ASUKARU　–*-アスカル

TEL　0952-60-2693

Email　asukaru2014@icloud.com

Adress　〒842-0002　佐賀県神埼市田道ヶ里2176-13