通過檢索複選框自動檢查複選框

Question

我通過從數組值中檢索複選框來解決一些問題。

我試着自動檢查數組所關心的複選框。

array [i]生成一些複選框的輸入 target [i]是一個包含一些checkboxe值的數組。所以當我刷新頁面時，我必須看到「星期二」和「星期幾」已被選中。 cf.the片斷 （我不知道如果我正確地解釋）

// table which generate checkboxes 
 
\t \t \t 
 
var array = new Array(); 
 
array[0]="Monday"; 
 
array[1]="Tuesday"; 
 
array[2]="Wendesday"; 
 
array[3]="Thirsday"; 
 
array[4]="Friday"; 
 
array[5]="Saturday"; 
 
array[6]="Sunday"; 
 

 
// values to of checkboxes I want to auto-check 
 
var target = new Array(); 
 
target[0]="Tuesday"; 
 
target[1]="Wendesday"; 
 

 

 
var cbh = document.getElementById('checkboxes'); 
 
var val = ''; 
 
var cap = ""; 
 

 
var j = ""; 
 
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); 
 
}

{ 
 
\t box-sizing: border-box; 
 
} 
 
#data { 
 
\t padding:5px; 
 
\t width:100vw; 
 
} 
 
.multiselect { 
 
\t overflow: visible; 
 
\t padding:0; 
 
\t padding-left:1px; 
 
\t border:none; 
 
\t background-color:#eee; 
 
\t width:100vw; 
 
\t white-space: normal; 
 
\t height:50px; 
 
} 
 
.checkboxes { 
 
\t height:100px; 
 
\t width:100px; 
 
\t border:1px solid #000; 
 
\t background-color:white; 
 
\t margin-left:-1px; 
 
\t display:inline-block; 
 
} 
 

 
label { 
 
\t display: inline-block; 
 
\t border: 1px grey solid; 
 
\t padding:5px; 
 
}

<form> 
 
\t <div id="data"> 
 
\t \t <div class="multiselect"> 
 
\t \t \t <div id="c_b"> 
 
\t \t \t \t <div id="checkboxes"> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</form> 
 
Tuesday and Wendesday have to be automitacly checked

謝謝您的幫助。 Regards

Answer 1

「所以，當我刷新頁面......」當你刷新頁面，整個事情被重新加載，從頭開始。你的陣列將會消失。如果你想要這種行爲，你將不得不堅持陣列（localStorage，餅乾，服務器端等），然後在加載頁面時檢索數組。

如果這不完全是你的意思，你只是想擁有一個靜態數組，那麼你需要訪問該數組，並在頁面加載時檢查複選框。

你有相當多的不必要的代碼，所以修改後的版本是這樣的：

// Master array from which checkboxes are created (uses "array literal" syntax for shorter typing) 
 
    var cbArray = ["Monday", "Tuesday", "Wendesday", "Thirsday", "Friday", "Saturday", "Sunday"]; 
 

 
    // values to of checkboxes I want to auto-check 
 
    var target = ["Tuesday", "Wendesday"]; 
 

 
    // Get element that will contain checkboxes 
 
    var cbh = document.getElementById('checkboxes'); 
 
    const checkboxGroupName = "chkDays"; // It is common to give all checkboxes in a group the same name 
 

 
    // Loop through the master array and make labels and checkboxes based on what's in it 
 
    cbArray.forEach(function(item, index) { 
 
\t 
 
    // Create and configure checkbox 
 
\t var cb = document.createElement('input'); 
 
    cb.type = 'checkbox'; 
 
    cb.value = item; 
 
    cb.name = checkboxGroupName; 
 
    cb.id = checkboxGroupName + (index + 1); 
 
    
 
    // If new checkbox is supposed to be checked, check it 
 
    target.forEach(function(val){ 
 
     if(cb.value === val){ 
 
     cb.checked = true; 
 
     } 
 
    }); 
 
    
 
    // Create and configure label 
 
\t var label= document.createElement("label"); 
 
    label.setAttribute("for", cb.id); // Labels should target an element's id 
 
\t label.textContent = item; // No need to go through the trouble of making a text node 
 
    
 
    // Append elements into the DOM 
 
    label.appendChild(cb); 
 
\t cbh.appendChild(label); 
 
    
 
    // Confirming Output: 
 
    console.log(label.outerHTML); 
 
    });

* { \t box-sizing: border-box; } 
 

 
#data { padding:5px; width:100vw; } 
 

 
.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:50px; 
 
} 
 

 
.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; 
 
} 
 
     
 
label { display: inline-block; border: 1px grey solid; padding:5px; }

<form> 
 
\t <div id="data"> 
 
\t \t <div class="multiselect"> 
 
\t \t \t <div id="c_b"> 
 
\t \t \t \t <div id="checkboxes"></div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</form>

Answer 2

設置cb.checked = true在創建時檢查複選框。

if (target.indexOf(cap) != -1) { 
    cb.checked = true; 
} 

添加片段：

function getCheckbox(value, label, checked) { 
    var cb = document.createElement('input'); 
    cb.value = value; 
    cb.checked = checked; 

    var label = document.createElement('label'); 
    label.innerHTML = label; 

    return [cb, label]; 
} 

var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; 

var checked = ['Tuesday', 'Wednesday']; 

var cbh = document.getElementById('checkboxes'); 
var container = document.createDocumentFragment(); 

for (var i=0, len=days.length; i < len; i++) { 
    var dom = getCheckbox(i, days[i], checked.indexOf(days[i]) != -1); 
    container.appendChild(dom[0]); 
    container.appendChild(dom[1]); 
} 

cbh.appendChild(container); 

Answer 3

您可以檢查是否一個數組包含有特定字符串：
Array.prototype.includes()^ES6或
Array.prototype.indexOf()

也不要忘記，<label>可以換兩個你input和文本的標籤

var cbh = document.getElementById('checkboxes'), 
 
dayNames = ["Monday","Tuesday","Wendesday","Thirsday","Friday","Saturday","Sunday"], 
 
preselect = ["Tuesday", "Wendesday"]; 
 

 
for (var i in dayNames) { 
 
    var day = dayNames[i]; 
 
    
 
    var label = document.createElement("label"), 
 
     cb = document.createElement('input'), 
 
     text = document.createTextNode(day); 
 
    
 
    cb.type = 'checkbox'; 
 
    cb.name = day; 
 
    cb.value = i; 
 
    // PRESELECT MATCHING inputs 
 
    // if(preselect.includes(day)) cb.checked = true; // or like: 
 
    if(preselect.indexOf(day) > -1) cb.checked = true; 
 
    
 
    label.appendChild(cb); 
 
    label.appendChild(text); 
 
    cbh.appendChild(label); 
 
}

<div id="checkboxes"></div>

Answer 4

那麼更好的解決方案是由@Scott馬庫斯提供的，但你也可以試試這個，

<!-- language: lang-css --> 
    <style> 
     * { 
         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; 
        } 
    </style> 
    <!-- language: lang-html --> 

    <form> 
     <div id="data"> 
      <div class="multiselect"> 
       <div id="c_b"> 
        <div id="checkboxes"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </form> 
    <!-- end snippet --> 


    <!-- begin snippet: js hide: false console: true babel: false --> 

    <!-- language: lang-js --> 
    <script> 
    // table which generate checkboxes 
     var array = new Array(); 
        array[0]="Monday"; 
        array[1]="Tuesday"; 
        array[2]="Wendesday"; 
        array[3]="Thirsday"; 
        array[4]="Friday"; 
        array[5]="Saturday"; 
        array[6]="Sunday"; 

    // values to of checkboxes I want to auto-check 
     var target = new Array(); 
        target[0]="Tuesday"; 
        target[1]="Wendesday"; 

        var cbh = document.getElementById('checkboxes'); 
        var val = ''; 
        var cap = ""; 

        var j = ""; 
        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'; 

        //added 
         target.forEach(function(a) 
         { 
         if(cap == a) 
         { 
          cbh.appendChild(cb).click(); 
         }else 
         { 
          cbh.appendChild(cb); 
         } 
         }); 
         //added 


         cb.name = cap; 
         cb.value = val; 
         label.appendChild(cb); 
         label.appendChild(text); 
         cbh.appendChild(label); 
        } 

    </script>