Tạo hộp kiểm động bằng JavaScript?

Question

Tôi đang cố gắng tạo hộp kiểm động bằng cách sử dụng HTML/JavaScript sau. Bất kỳ ý tưởng tại sao nó không hoạt động?

<div id="cb"></div> 
<script type="text/javascript"> 
    var cbh = document.getElementById('cb'); 
    var val = '1'; 
    var cap = 'Jan'; 

    var cb = document.createElement('input'); 
    cb.type = 'checkbox'; 
    cbh.appendChild(cb); 
    cb.name = val; 
    cb.value = cap; 
    cb.appendChild(document.createTextNode(cap)); 
</script> 

Answer 1

Bạn đang cố gắng đặt một nút văn bản bên trong phần tử đầu vào.

Các yếu tố đầu vào trống và không thể có con.

... 
var checkbox = document.createElement('input'); 
checkbox.type = "checkbox"; 
checkbox.name = "name"; 
checkbox.value = "value"; 
checkbox.id = "id"; 

var label = document.createElement('label') 
label.htmlFor = "id"; 
label.appendChild(document.createTextNode('text for label after checkbox')); 

container.appendChild(checkbox); 
container.appendChild(label); 

Answer 2

Dòng cuối cùng nên đọc

cbh.appendChild(document.createTextNode(cap)); 

Phụ thêm văn bản (? Nhãn) để container giống như hộp kiểm, không phải là hộp kiểm bản thân

Answer 3

Bạn có thể tạo một hàm:

function changeInputType(oldObj, oTyp, nValue) { 
    var newObject = document.createElement('input'); 
    newObject.type = oTyp; 
    if(oldObj.size) newObject.size = oldObj.size; 
    if(oldObj.value) newObject.value = nValue; 
    if(oldObj.name) newObject.name = oldObj.name; 
    if(oldObj.id) newObject.id = oldObj.id; 
    if(oldObj.className) newObject.className = oldObj.className; 
    oldObj.parentNode.replaceChild(newObject,oldObj); 
    return newObject; 
} 

Và bạn thực hiện cuộc gọi như:

changeInputType(document.getElementById('DATE_RANGE_VALUE'), 'checkbox', 7);