創建動態複選框Javascript

我正在基於數組創建複選框的「生成器」。

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

 
\t \t \t var cbh = document.getElementById('checkboxes'); 
 
\t \t  var val = ''; 
 
\t \t  var cap = ''; 
 
\t \t  var cb = document.createElement('input'); 
 

 
\t \t  var j = ""; 
 
\t \t \t for (var i in array) { 
 
\t \t \t \t //Name of checkboxes are their number so I convert the i into a string. 
 
\t \t \t \t j = i.toString(); 
 
\t \t \t \t console.log('J = ', j); 
 
\t \t \t \t val = j; 
 
\t \t \t \t //cap will be the value/text of array[i] 
 
\t \t \t \t cap = array[i]; 
 
\t \t \t \t console.log('cap =', cap); 
 

 

 
\t \t \t  cb.type = 'checkbox'; 
 
\t \t \t  cbh.appendChild(cb); 
 
\t \t \t  cb.name = val; 
 
\t \t \t  cb.value = cap; 
 
\t \t \t  cbh.appendChild(document.createTextNode(cap)); 
 
\t \t \t }

\t \t \t * { 
 
    \t \t \t box-sizing: border-box; 
 
\t \t \t } 
 
\t \t \t #data { 
 
\t \t \t  padding:0; 
 
\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 } 
 
\t \t </style>

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

（CSS的是不是我的問題很重要......我認爲）

的問題是，它將只創建一個checkboxe，最後一個元素，我不明白爲什麼...我想每天都有一個複選框。

之後，我問如何檢索元素選擇，但這是在第二部分。

所以，如果有人有一個想法，我會很感激！

關於。

來源

2017-05-29 Carnatik

你不需要j = i.toString（）。每當你做「somestring」+我，引擎正在爲你做... –

var cb = document.createElement('input');使用這條線在for循環

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

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

 
\t \t  var j = ""; 
 
\t \t \t for (var i in array) { 
 
\t \t \t \t //Name of checkboxes are their number so I convert the i into a string. 
 
\t \t \t \t j = i.toString(); 
 
\t 
 
\t \t \t \t val = j; 
 
\t \t \t \t //cap will be the value/text of array[i] 
 
     var cb = document.createElement('input'); 
 
     var label= document.createElement("label"); 
 
     
 
\t \t \t  \t cap = array[i]; 
 
      var text = document.createTextNode(cap); 
 
\t \t \t  cb.type = 'checkbox'; 
 
\t \t \t  cbh.appendChild(cb); 
 
\t \t \t  cb.name = val; 
 
\t \t \t  cb.value = cap; 
 
      label.appendChild(cb); 
 
      label.appendChild(text); 
 
\t \t \t  cbh.appendChild(label); 
 
\t \t \t }

* { 
 
    \t \t \t box-sizing: border-box; 
 
\t \t \t } 
 
\t \t \t #data { 
 
\t \t \t  padding:0; 
 
\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 { 
 
    display: inline-block; 
 
} 
 
\t \t </style>

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

更新：爲了保持標籤和複選框一起使用

label { 
    display: inline-block; 
}

來源

2017-05-29 14:48:20

嘿，謝謝你的回答！它可以工作，但是當我縮小窗口時，複選框可以分開。（複選框在一行，他的文字在另一行）。你有什麼想法如何解決它？ – Carnatik

我根據您的要求更新了我的答案。現在檢查。 –

@Carnatik我爲每個複選框添加了css和標籤。 –

您需要聲明裏面新節點的for循環：

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

 
\t \t \t var cbh = document.getElementById('checkboxes'); 
 
\t \t  
 

 
\t \t  var j = ""; 
 
\t \t \t for (var i in array) { 
 
       var val = ''; 
 
\t \t  var cap = ''; 
 
\t \t  var cb = document.createElement('input'); 
 
\t \t \t \t //Name of checkboxes are their number so I convert the i into a string. 
 
\t \t \t \t j = i.toString(); 
 
\t \t \t \t console.log('J = ', j); 
 
\t \t \t \t val = j; 
 
\t \t \t \t //cap will be the value/text of array[i] 
 
\t \t \t \t cap = array[i]; 
 
\t \t \t \t console.log('cap =', cap); 
 

 

 
\t \t \t  cb.type = 'checkbox'; 
 
\t \t \t  cbh.appendChild(cb); 
 
\t \t \t  cb.name = val; 
 
\t \t \t  cb.value = cap; 
 
\t \t \t  cbh.appendChild(document.createTextNode(cap)); 
 
\t \t \t }

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

來源

2017-05-29 14:47:01 Zenoo

認沽變種CB =使用document.createElement（ '輸入'）;內環路：

   var j = ""; 
       for (var i in array) { 
        //Name of checkboxes are their number so I convert the i into a string. 
        var cb = document.createElement('input'); 
        j = i.toString(); 
        console.log('J = ', j); 
        val = j; 
        //cap will be the value/text of array[i] 
        cap = array[i]; 
        console.log('cap =', cap); 


        cb.type = 'checkbox'; 
        cbh.appendChild(cb); 
        cb.name = val; 
        cb.value = cap; 
        cbh.appendChild(document.createTextNode(cap)); 
       }

來源

2017-05-29 14:48:01

創建動態複選框Javascript

回答

相關問題