通过在 JavaScript 中检索它们的值来自动选择复选框 [重复]

Posted 2023-05-09

【中文标题】通过在 JavaScript 中检索它们的值来自动选择复选框 [重复]

【英文标题】：auto select checkboxes by retrieving their value in JavaScript [duplicate]

【发布时间】：2017-11-07 08:24:05

【问题描述】：

自 1 周以来，我在某一点上遇到了一些困难，我有 2 个数组，我想通过检索其中一个数组中的值来自动选择复选框。

首先，我有一个循环，它根据第一个数组选择[]创建一些复选框。

每次我选中一个复选框时，都会使用分隔符更新一个文本字段。 "$#"

我自己保存这个文本字段。但现在我有一个数组，其中包含一些值作为字符串 target[]。

我想自动选择在数组 target[] 中有他的值的复选框。因此，如果我在 target[] 中更改了一个值，然后刷新，相关的复选框将被自动选中。

这是一个 sn-p，看看它现在的样子。请更新它以回答。

我更喜欢 javascript，但如果你有 Jquery 就可以了。

//array of options
var choices = new Array();
choices[0] = "January";
choices[1] = "February";
choices[2] = "March";
choices[3] = "April";
choices[4] = "May";
choices[5] = "Juny";
choices[6] = "July";
choices[7] = "August";
choices[8] = "September";
choices[9] = "October";
choices[10] = "November";
choices[11] = "December";

var target = new Array()
target[0] = "3";
target[1] = "8";

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 choices) 
  //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 choices[i]
  var cb = document.createElement('input');
  var label = document.createElement("label");

  cap = choices[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 || '')

* 
  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: 75px;


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

【参考方案1】：

要选择target[] 中给出的复选框ID，请使用

if(target.indexOf(i)>=0)
        cb.checked =true ;
      

这会将选中的属性设置为target[]内的复选框。之后调用

updateText(); 

这将更新文本框内的值

//array of options
var choices = new Array();
choices[0] = "January";
choices[1] = "February";
choices[2] = "March";
choices[3] = "April";
choices[4] = "May";
choices[5] = "Juny";
choices[6] = "July";
choices[7] = "August";
choices[8] = "September";
choices[9] = "October";
choices[10] = "November";
choices[11] = "December";

var target = new Array()
target[0] = "3";
target[1] = "8";

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 choices) 
  //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 choices[i]
  var cb = document.createElement('input');
  var label = document.createElement("label");

  cap = choices[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)
  if(target.indexOf(i)>=0)
    cb.checked =true ;
  


updateText();
function updateText() 
  t.value = [null, ...document.querySelectorAll('#checkboxes [type="checkbox"]')].reduce((s, el) => el && el.checked ? s = (s || '') + el.value + '$#' : s || '')

* 
  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: 75px;


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