0
我有一些問題。我有一個複選框的部分，一個人可以檢查與否。如果選中複選框，則該值將發送到文本字段，並存儲該文本。自動選擇複選框通過比較兩個數組（）JavaScript
當用戶在頁面上回退時，文本框已經被選中的值完成。但複選框未被選中。所以我想在JavaScript中自動檢查thoses複選框。
所以我得到了2個數組，其中一個是選項，另一個是選擇的選項。我想根據數組target []自動檢查複選框。
我需要使用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如果你可以編輯告訴我如何進行，這將是完美的。
嘿，謝謝你的回答。但是，你能對你的建議更精確嗎？我不確定我是否清楚明白。正如我所說，目標將根據文本字段進行更新，幷包含所選的值。也許如果你用你的解決方案添加snipet，我會清楚地看到你的意思。 – Carnatik