通过比较两个array（）JavaScript自动选择复选框

2 回答

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

  回复于 2024-04-19T06:18:52+08:00
• 0

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

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

  回复于 2024-04-19T06:18:52+08:00