创建动态复选框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

回答

相关问题