選択フォームで「全て選択」を実装するjQuery - ConcreteCMSの属性の場合

ConcreteCMSでは、選択フォームが用意されています。これを使うと、ページにデータを登録していくのに便利です。

しかし、選択フォームでオプションを一個一個選んでいくのは、意外と手間がかかります。そこで「全て選択」ボタンを作って、jQueryで一括操作できるようにしてみました。フォームで選択肢が多い場合などに役立ちます。

都道府県を全選択

↑の、営業エリア部分に、「全て選択」ボタンを実装してみます。（都道府県の並び順はこちらを参考にしてください。）

コード

/concrete/attributes/select/form.php を書き換えていきます。※直接編集するのではなく、/application/attributes/select/form.phpにコピーしてから編集すると、アップデートしても自分の編集が失われません。

編集は、

/*
 * Checkbox list.
 */

と書かれているところをカスタマイズしていきます。

ボタンを追加するコードは↓です。

<button class="selectall" id="akid_<?php echo h($akID);?>">全て選択</button>

 

また、jQueryで処理しやすくするために、checkboxのHTML出力にもclassを追加しておきます。
↓の太字部分を追加します。

$form->checkbox($view->field('atSelectOptionValue') . '[]', $opt->getSelectAttributeOptionID(), in_array($opt->getSelectAttributeOptionID(), $selectedOptionIDs),['class'=> 'akid_'.h($akID)])

 

jQueryコードも追加します。（foreachループの下が良いでしょう。）

    ?>
   <script type="text/javascript">
       $('button.selectall').click(function () {
           $('input.' + $(this).attr('id')).prop('checked', true);
           return false;
       });
   </script>
<?php

こうすることで、「全て選択」が実装できました。

新着ブログ記事
ウェブ集客

クイズ、計算式など、ホームページ訪問者の興味・関心・満足度を高めるコンテンツを提供する仕組み。一度来てくださった方の再訪問率を高める。

濃い見込み客を見つけるホームページ自動見積もりシステム

自動見積計算と見積PDF作成を行うサービスです。濃い見込み客を抽出する仕組みで、御社のホームページを営業マンにします。

否定で終わらないウェブメディア

弊社運営のウェブメディアでは、否定レビューで終わらない仕組みを導入しています。