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

Question

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

我想自动选择数组target[]“March”和“September”中的元素并让它们出现在文本区域中。所以“March”和“September”出现选中并出现在文本区域中。

但我也希望能够通过选择其他一些选项来编辑文本区域。因此，如果我选中“一月”并且没有触及“三月”和“九月”，它们会在文本区域中显示为选中并显示。

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

//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);
}

* {
  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 automatically checked

Answer 1

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

cb.checked = true;

当您遍历数组时，检查您想要的值并将检查设置为 true。

Answer 2

可以通过多种方式实现自动选择，例如使用 el.click()。然后你需要循环并查看 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||'')

首先，我们使用“querySelectorAll('#checkboxes [type="checkbox"]')”获取 id 中的所有复选框

接下来，添加 "..." 以将节点列表视为数组，同时使用 [ ] 形成新数组（此外，在索引 0 处添加 "null" 更容易稍后代码）

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

是es6，所以reduce回调的参数在“=>”之前，ald在“=>”之后有自动返回的表达式。

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

基于观察target[]变化的例子：

//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% 可靠的，并且不能在旧的浏览器中工作，但我想最好不要使用响应式框架。