1つのチェックボックスが変更された後、複数の項目が入力されたフィールドを選択してください

Question

私は何かを持っていますが、それをどうやってやるかわからないので、ここで助言を得ることができます。

私はすべてのアクティビティが登録されるアクティビティ登録アプリ（Laravelを使用）に取り組んでいます。非常に重要なことは、招待された人と実際に出席した人を記録する必要があることです。私はすでにこの部分を実行しています。私の問題はもっと実用的な側面です。

招待者と出席者の複数選択フィールドにjQuery Select2を使用します。他のユーザーの招待や出席は活動の種類に依存しますが、今すぐ招待されたり、すべての活動に参加しなければならないユーザーグループが存在するとします。 Select2を使用すると、ユーザーを一度に1つしか選択することができず、事実上すべてのアクティビティで50人のユーザーに対してこれを実行する必要がある場合は嫌です。

「グループ」を選択する最良の方法は選択フィールドのグループ内のすべての名前を入力する選択ですか？または、これを行うためのよりよい方法がありますか？

私の頭の中には、グループを表す選択フィールドの隣にチェックボックスがあります。グループのチェックボックスを選択すると、そのグループの一部であるすべてのユーザーが選択フィールドに入力されます。

これはできません。私は周りを見回し、すべての検索が選択ボックスに入力する選択ボックスを表示します。チェックボックスは処理されません。

これを行う方法に関するアドバイスはありますか？

私のPHP/MySqlは中間ですが、Javascript/Ajaxは非常に基本的です。

Answer 1

1つの戦略は、クリックしたときにユーザーのグループの選択を設定または切り替えるコントロール（チェックボックス要素）を構築することです。

<select class="my-big-group-select" multiple="multiple"> 
    <!-- assorted options here --> 
</select> 
<label> 
    <input type="checkbox" class="toggle-default-group" /> 
    Use my default big group of users 
</label> 

Select2 APIを使用すると、生成するコンポーネントをプログラムで制御することができます。
あなたがここでそれについての詳細を読むことができます：https://select2.github.io/examples.html#programmatic

ここSelectセレクトではjQueryを使用して、この知識を活用する一つの方法です：

<script> 
    var groupSelect = $('.my-big-group-select').select2(); 
    var groupToggle = $('.toggle-default-group'); 
    var myBigGroup = ["Aaron", "Beth", "Cindy"]; // assorted option values 

    groupToggle.on("click", function() { 
     if ($(this).is(':checked')) { 
      groupSelect.val(myBigGroup).trigger('change'); 
     } else { 
      var currentlySelected = groupSelect.val(); 
      if (currentlySelected) { 
       var filteredSelections = currentlySelected.filter(function(key) { 
        return myBigGroup.indexOf(key) < 0; 
       }); 
       groupSelect.val(filteredSelections).trigger('change'); 
      } 
     } 
    }); 
</script> 

ここでアクションでそれをすべてを示していCodePenです：のhttp://codepen.io/anon/pen/qNQKOd

もちろん、これを基にして追加の機能強化（複数のグループを選択するなど）を行うことができます。代替案として

、あなたは、ブートストラップ・複数選択のような他のコードライブラリを考慮することができる：https://davidstutz.github.io/bootstrap-multiselect/

が、これは正しい方向にポイントを願って！