Question

我遇到了编写函数的一些困难。我在JavaScript中生成了一些复选框。

我想自动选择数组中的元素target[]＆＃34; March＆＃34;和＆＃34;九月＆＃34;并使它们出现在文本区域中。所以＆＃34; March＆＃34;和＆＃34;九月＆＃34;出现检查并显示在textarea中。

但我也希望能够通过选择其他选项来编辑文本区域。所以，如果我检查＆＃34; 1月＆＃34;并且没有接触到＃3; March＆＃34;和＆＃34;九月＆＃34;它们在文本区域中显示为已选中且显示为。

我真的需要它在没有jQuery的JavaScript中。

＆＃13;

//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";

// values to of checkboxes I want to auto-check
var target = new Array();
target[0] = "March";
target[1] = "September";


var cbh = document.getElementById('checkboxes');
var val = '';
var cap = "";

var j = "";

// 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);
}

＆＃13;

* {
  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: 50px;
}

.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;
}

＆＃13;

<form>
  <div id="data">
    <div class="multiselect">
      <div id="c_b">
        <div id="checkboxes">
        </div>
      </div>
    </div>
  </div>
</form>

<textarea id="t"></textarea> March and September have to be automatically checked

＆＃13;

Answer 1

自动选择可以通过多种方式实现，例如使用el.click（）。然后你需要循环＆amp;看看el是否被“检查” - 我已经提供了你的问题和描述中描述的两个基本例子。更简单的.checked示例。

//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";

// values to of checkboxes I want to auto-check
var target = new Array();
target[0]="March";
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',e=>{
    if (e.target.value) t.value += e.target.name
  })
  //alternate version:
  //cb.addEventListener('click',updateText)
}

//function updateText(){
//  t.value = [null,...document.querySelectorAll('#checkboxes [type="checkbox"]')].reduce((s,el)=>el&&el.checked?s=(s||'')+el.name: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:50px;
}
.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;
 }

<form>
	<div id="data">
		<div class="multiselect">
			<div id="c_b">
				<div id="checkboxes">
				</div>
			</div>
		</div>
	</div>
</form>

<textarea id="t"></textarea>

March and September have to be automitacly checked

的解释

[null,...document.querySelectorAll('#checkboxes [type="checkbox"]')].reduce((s,el)=>el&&el.checked?s=(s||'')+el.name:s||'')

首先，我们将ID中的所有复选框都带有“ querySelectorAll（'＃checkboxes [type =”checkbox“]'）”

接下来，在 [] 形成新数组的同时，在“ ... ”前面将节点列表视为数组（同样，在索引0处添加“null”更容易代码稍后）

然后， .reduce（）输出字符串，循环数组的每个元素，提供2个参数 - s - 相同的变量，在元素之间传递，向其中添加字符串和 el - 数组中的每个元素（inpyt复选框元素）。

这是es6，因此减少回调的参数出现在“ =＆gt; ”之前，等于“=＆gt;”之后有自动返回的表达。

在这个表达式中，有“if”的简写 - 如果el是 .checked ，我们将 el.name 添加到“s”（如果我们'，则为空字符串）重新开始），如果没有检查el - 我们只是在循环中传递“s”（或空字符串）

基于观察目标[]变化的示例：

//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 arrayChangeHandler = {
  get: function(target, property) {
    return target[property];
  },
  set: function(target, property, value, receiver) {
    target[property] = value;
    array.forEach(n=>(target.includes(n) != document.querySelector('[name="'+n+'"]').checked) ? document.querySelector('[name="'+n+'"]').click() : null)
    return true;
  }
};

var target = new Proxy([], arrayChangeHandler);



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.name:s||'')
}

//document.querySelector('[name="March"]').click()
//document.querySelector('[name="September"]').click()
target[0]="March";
target[1]="September";

* {
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:50px;
}
.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;
 }

<form>
	<div id="data">
		<div class="multiselect">
			<div id="c_b">
				<div id="checkboxes">
				</div>
			</div>
		</div>
	</div>
</form>

<textarea id="t"></textarea>

March and September have to be automitacly checked

这个例子使用了一种新的技术 - 代理，所以它可能不是100％可靠，并且不适用于旧浏览器，但我认为没有反应框架是最好的选择。

Answer 2

您可以将复选框设置为像这样选中，

cb.checked = true;

当您遍历数组时检查所需的值并将checked设置为true。

在JavaScript中自动选择和检索复选框值

2 个答案: