JavaScriptで値を検索して自動選択するチェックボックス

Question

1週間後に1ポイントで問題が発生しました.2つの配列があり、配列の1つの値を取得することでチェックボックスを自動的に選択します。

まず、最初の配列の選択肢[]に基づいてチェックボックスを作成するループがあります。

チェックボックスをオンにするたびに、テキストフィールドがセパレータで更新されます。 "$＃"

私はこのテキストフィールドを自分で保存します。しかし、今私は文字列target []としていくつかの値を持つ配列を持っています。

配列target []内に値があるチェックボックスを自動的に選択したいとします。ですから、ターゲット[]内の値を変更してリフレッシュすると、該当するチェックボックスが自動的に選択されます。

ここで、どのように見えるかを確認するスニペットです。それを更新して回答してください。

JavaScriptが好きですが、JqueryがあればOKです。

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

Answer 1

チェックボックスのIDを選択するため、これは

updateText(); 

を呼び出す target[] .After内部chekboxにchecked属性を設定します

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

target[]使用に与えられました

テキストボックス

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

内の値を更新します