0
いくつかの問題があります。私は人がチェックすることができるかどうかチェックボックスを持つセクションがあります。チェックボックスをオンにすると、その値がテキストフィールドに送られ、このテキストが保存されます。2つのarray（）JavaScriptを比較してチェックボックスを自動選択
ユーザーがページを再訪すると、チェックされた値でテキストフィールドが既に完成しています。しかしチェックボックスはチェックされていません。だから私はJavaScriptで自動的にチェックボックスをチェックしたいと思います。
私は2つの配列を1つのオプションと選択されたオプションであるもう1つ持っています。配列のターゲット[]に従ってチェックボックスを自動的にチェックしたいと思います。
JavaScriptを使用し、Jqueryを使用する必要はありません。ここに私のコードのテンプレートがあります。
//array of options
//array of options
var array = new Array();
array[0]="January";
array[1]="February";
array[2]="March";
array[3]="April";
array[4]="May";
array[5]="Juny";
array[6]="July";
array[7]="August";
array[8]="September";
array[9]="October";
array[10]="November";
array[11]="December";
var target = new Array();
target[0]="April";
target[1]="September";
var cbh = document.getElementById('checkboxes');
var val = '';
var cap = "";
var j = "";
var t = document.getElementById('t');
// the loop is creating the checkboxes with name, value...
for (var i in array) {
//Name of checkboxes are their number so I convert the i into a string.
\t j = i.toString();
\t val = j;
\t //cap will be the value/text of array[i]
\t var cb = document.createElement('input');
\t var label= document.createElement("label");
\t cap = array[i];
\t var text = document.createTextNode(cap);
\t cb.type = 'checkbox';
\t cbh.appendChild(cb);
\t cb.name = cap;
\t cb.value = val;
\t label.appendChild(cb);
\t label.appendChild(text);
\t cbh.appendChild(label);
cb.addEventListener('click',updateText)
}
function updateText(){
t.value = [null,...document.querySelectorAll('#checkboxes [type="checkbox"]')].reduce((s,el)=>el&&el.checked?s=(s||'')+el.value+'$#':s||'')
}
//document.querySelector('[name="March"]').click()
//document.querySelector('[name="September"]').click()\t \t \t * {
\t \t \t box-sizing: border-box;
\t \t \t }
\t \t \t #data {
\t \t \t padding:5px;
\t \t \t \t width:100vw;
\t \t \t }
\t \t \t .multiselect {
\t \t \t \t overflow: visible;
\t \t \t \t padding:0;
\t \t \t \t padding-left:1px;
\t \t \t \t border:none;
\t \t \t \t background-color:#eee;
\t \t \t \t width:100vw;
\t \t \t \t white-space: normal;
\t \t \t \t height:200px;
\t \t \t }
\t \t \t .checkboxes {
\t \t \t \t height:100px;
\t \t \t \t width:100px;
\t \t \t \t border:1px solid #000;
\t \t \t \t background-color:white;
\t \t \t \t margin-left:-1px;
\t \t \t \t display:inline-block;
\t \t \t }
label {
\t \t \t \t display: inline-block;
\t \t \t \t border: 1px grey solid;
\t \t \t \t padding:5px;
\t \t \t }\t \t <a onclick="All();">All</a> | <a onclick="Selected();"> Selected</a>
\t \t <form>
\t \t \t <div id="data">
\t \t \t \t <div class="multiselect">
\t \t \t \t \t <div id="c_b"> <!-- Nous sert à réccupérer les valeurs des checkboxes selectionnés -->
\t \t \t \t \t \t <div id="checkboxes"> <!-- Nous sert à créer dynamiquement les différentes checkboxes -->
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </form>
\t \t <textarea id="t"></textarea>私は続行する方法を私を見るためにそれを編集することができれば、それは完璧になるこのsnipetを追加しました。
お返事ありがとうございます。しかし、あなたが提案したことについてもっと正確にすることはできますか？私は明確に理解しているかどうかはわかりません。私が言ったように、ターゲットはテキストフィールドに従って更新され、選択された値を含んでいます。たぶんあなたのソリューションをスニペットを追加する場合は、私はあなたが何を意味するかをはっきりとわかります。 – Carnatik