我有一些问题。我有一个复选框的部分,一个人可以检查与否。如果选中复选框,则该值将发送到文本字段,并存储该文本。自动选择复选框通过比较两个数组()JavaScript
当用户在页面上回退时,文本框已经被选中的值完成。但复选框未被选中。所以我想在JavaScript中自动检查thoses复选框。
所以我得到了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.
\t j = i.toString();
\t val = j;
\t //cap will be the value/text of array[i]
\t var cb = document.createElement('input');
\t var label= document.createElement("label");
\t cap = array[i];
\t var text = document.createTextNode(cap);
\t cb.type = 'checkbox';
\t cbh.appendChild(cb);
\t cb.name = cap;
\t cb.value = val;
\t label.appendChild(cb);
\t label.appendChild(text);
\t 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()
\t \t \t * {
\t \t \t box-sizing: border-box;
\t \t \t }
\t \t \t #data {
\t \t \t padding:5px;
\t \t \t \t width:100vw;
\t \t \t }
\t \t \t .multiselect {
\t \t \t \t overflow: visible;
\t \t \t \t padding:0;
\t \t \t \t padding-left:1px;
\t \t \t \t border:none;
\t \t \t \t background-color:#eee;
\t \t \t \t width:100vw;
\t \t \t \t white-space: normal;
\t \t \t \t height:200px;
\t \t \t }
\t \t \t .checkboxes {
\t \t \t \t height:100px;
\t \t \t \t width:100px;
\t \t \t \t border:1px solid #000;
\t \t \t \t background-color:white;
\t \t \t \t margin-left:-1px;
\t \t \t \t display:inline-block;
\t \t \t }
label {
\t \t \t \t display: inline-block;
\t \t \t \t border: 1px grey solid;
\t \t \t \t padding:5px;
\t \t \t }
\t \t <a onclick="All();">All</a> | <a onclick="Selected();"> Selected</a>
\t \t <form>
\t \t \t <div id="data">
\t \t \t \t <div class="multiselect">
\t \t \t \t \t <div id="c_b"> <!-- Nous sert à réccupérer les valeurs des checkboxes selectionnés -->
\t \t \t \t \t \t <div id="checkboxes"> <!-- Nous sert à créer dynamiquement les différentes checkboxes -->
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </form>
\t \t <textarea id="t"></textarea>
我加入这个snipet如果你可以编辑告诉我如何进行,这将是完美的。
嘿,谢谢你的回答。但是,你能对你的建议更精确吗?我不确定我是否清楚明白。正如我所说,目标将根据文本字段进行更新,并包含所选的值。也许如果你用你的解决方案添加snipet,我会清楚地看到你的意思。 – Carnatik