2017-06-02 181 views
0

我有一些问题。我有一个复选框的部分,一个人可以检查与否。如果选中复选框,则该值将发送到文本字段,并存储该文本。自动选择复选框通过比较两个数组()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如果你可以编辑告诉我如何进行,这将是完美的。

回答

0

当您根据目标数组中是否存在复选框时,您只需设置复选框的选中属性。

//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; 
 
    cb.checked = target.indexOf(cap) !== -1; 
 
\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 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 }
<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>

0

根据您的设置,您需要遍历所有的数组元素找到匹配的值,然后检查匹配复选框。

但是,我会建议一种不同的方法:在目标数组中,存储复选框的索引。这样你可以直接参考。

+0

嘿,谢谢你的回答。但是,你能对你的建议更精确吗?我不确定我是否清楚明白。正如我所说,目标将根据文本字段进行更新,并包含所选的值。也许如果你用你的解决方案添加snipet,我会清楚地看到你的意思。 – Carnatik