通过比较两个 array() JavaScript 自动选择复选框

Question

我遇到了一些问题。我有一个带有复选框的部分，人们可以检查或不检查。如果选中了一个复选框，则该值将发送到一个文本字段，我存储此文本。

当用户在页面上返回时，文本字段已由检查的值完成。但复选框未选中。所以我想在 JavaScript 中自动检查那些复选框。

所以我得到了 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. 
	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>

如果您可以编辑它以向我展示如何继续，我添加了此片段，这将是完美的。

Answer 1

根据您的设置，您需要遍历所有数组元素以找到匹配的值，然后选中匹配的复选框。

但是，我建议采用不同的方法：在目标数组中，存储复选框的索引。这样你就有了直接的参考。

Answer 2

当你根据它是否存在于你的目标数组中来设置复选框时，你只需要设置它的选中属性。

//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>