我遇到了一些问题。我有一个带复选框的部分，一个人可以检查或不检查。如果选中复选框，则会将值发送到文本字段，然后存储此文本。
当用户在页面上返回时，文本字段已由选中的值完成。但是复选框未经检查。所以我想自动检查JavaScript中的复选框。
所以我得到了2个数组，其中一个是选项，另一个是选中的选项。我想根据数组目标[]自动检查复选框。
我需要使用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.
j = i.toString();
val = j;
//cap will be the value/text of array[i]
var cb = document.createElement('input');
var label= document.createElement("label");
cap = array[i];
var text = document.createTextNode(cap);
cb.type = 'checkbox';
cbh.appendChild(cb);
cb.name = cap;
cb.value = val;
label.appendChild(cb);
label.appendChild(text);
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() * {
box-sizing: border-box;
}
#data {
padding:5px;
width:100vw;
}
.multiselect {
overflow: visible;
padding:0;
padding-left:1px;
border:none;
background-color:#eee;
width:100vw;
white-space: normal;
height:200px;
}
.checkboxes {
height:100px;
width:100px;
border:1px solid #000;
background-color:white;
margin-left:-1px;
display:inline-block;
}
label {
display: inline-block;
border: 1px grey solid;
padding:5px;
} <a onclick="All();">All</a> | <a onclick="Selected();"> Selected</a>
<form>
<div id="data">
<div class="multiselect">
<div id="c_b"> <!-- Nous sert à réccupérer les valeurs des checkboxes selectionnés -->
<div id="checkboxes"> <!-- Nous sert à créer dynamiquement les différentes checkboxes -->
</div>
</div>
</div>
</div>
</form>
<textarea id="t"></textarea>
我添加了这个snipet，如果你可以编辑它以告诉我如何继续，这将是完美的。
答案 0 :(得分：0)
当您根据目标数组中是否存在复选框时，您必须设置复选框的checked属性。
//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.
j = i.toString();
val = j;
//cap will be the value/text of array[i]
var cb = document.createElement('input');
var label= document.createElement("label");
cap = array[i];
var text = document.createTextNode(cap);
cb.type = 'checkbox';
cbh.appendChild(cb);
cb.name = cap;
cb.value = val;
cb.checked = target.indexOf(cap) !== -1;
label.appendChild(cb);
label.appendChild(text);
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()* {
box-sizing: border-box;
}
#data {
padding:5px;
width:100vw;
}
.multiselect {
overflow: visible;
padding:0;
padding-left:1px;
border:none;
background-color:#eee;
width:100vw;
white-space: normal;
height:200px;
}
.checkboxes {
height:100px;
width:100px;
border:1px solid #000;
background-color:white;
margin-left:-1px;
display:inline-block;
}
label {
display: inline-block;
border: 1px grey solid;
padding:5px;
}<a onclick="All();">All</a> | <a onclick="Selected();"> Selected</a>
<form>
<div id="data">
<div class="multiselect">
<div id="c_b"> <!-- Nous sert à réccupérer les valeurs des checkboxes selectionnés -->
<div id="checkboxes"> <!-- Nous sert à créer dynamiquement les différentes checkboxes -->
</div>
</div>
</div>
</div>
</form>
<textarea id="t"></textarea>
答案 1 :(得分：0)
根据您的设置，您需要遍历所有数组元素以查找匹配值，然后选中匹配的复选框。
但是，我建议采用不同的方法：在目标数组中，存储复选框的索引。这样你就可以直接参考。