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

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

記事公開日: 2022年03月15日

concrete5の使い方ネタです。今回は、「特定ページでjavascri... 詳細はこちら

#

弊社で無償公開しているconcrete5アドオンRescuework's ... 詳細はこちら

#

アクセシブルなconcrete5テーマflowerを使ってみました。日本... 詳細はこちら