添加輸入類型號碼變化複選框

Question

我想知道如何添加複選框輸入類型號碼變化。

默認情況下，我有：

HTML代碼

<label for checkbox_number>Number of checkboxes :</label> 
<input id="checkbox_number" name="checkbox_number" type="number" size="1" maxlength="1" value="1" onkeydown="change_cb()"/> 

<input id="checkbox1" type="checkbox" name="checkbox[]" value="cb1"> 

如果我改變我的複選框號 2，我想的JavaScript/AJAX添加

<input id="checkbox2" type="checkbox" name="checkbox[]" value="cb2"> 

同就好像我將更改號碼更改爲1，它必須刪除一個複選框。

我已經做了同樣的事情，但與表（添加一行或刪除一行），但在這裏我不知道如何添加新元素（在我的第一個腳本我不添加新表，只是新行） ...

需要幫助寫我的JS功能change_cb（）

---

編輯給你我的回答

我發現如何與DADE幫助做到這一點（謝謝DA DE）：

HTML代碼（下同）

<label for="cb_number">How many checkboxes ?</label> 
<input id="cb_number" name="cb_number" type="number" size="1" maxlength="1" value="1"> 
<div class="my_cb_result"></div> 

jQuery代碼

$(window).ready(function() { 
    $('#cb_number').on('keyup mouseup', function() { 
     var number = parseInt($(this).val()); 
     $('input[type="checkbox"]').remove(); 
     $('label[class="to_del"]').remove(); 
     for (var i=1;i<=number;i++) { 
      var data = '<label for="checkbox" class="to_del">Label of my checkbox</label><input id="checkbox'+i+'" type="checkbox" name="checkbox[]" value="'+i+'">'; 
     } 
     $('.my_cb_result').append(data); 
    }); 
}); 

JSFiddle with comments

Answer 1

HTML：

<label for checkbox_number>Number of checkboxes :</label> 
<input id="checkbox_number" name="checkbox_number" type="number" size="1" maxlength="1" value="0"> 
<div class="inputs"></div> 

JS：

$('#checkbox_number').on('keyup mouseup', function() { 
    var number = parseInt($(this).val()); 
    $('input[type="checkbox"]').remove(); 
    for (var i=1;i<=number;i++) { 
     var data = '<input id="checkbox'+i+'" type="checkbox" name="checkbox[]" value="cb'+i+'">'; 
     $('.inputs').append(data); 
    } 
}); 

JSFiddle with comments

Answer 2

試試這個：

var ele = '<input id="checkbox2" type="checkbox" name="checkbox[]" value="cb2">'; 
document.getElementById("yourElementID").appendChild(ele); 

Answer 3

您的意思是如果checkbox_number的值設置爲「2」，您想渲染第二個複選框？

如果是這樣，你應該使用onblur或類似的checkbox_number運行將呈現通過getElementById和appendChild的新功能。

IE：

<script type="text/javascript"> 
function change_cb() { 
var secondCheckbox = '<input id="checkbox_number2" name="checkbox_number" type="number" size="1" maxlength="1" value="1" />"; 
document.getElementById("yourForm").appendChild(secondCheckBox); 
} 
</script> 

<div id="yourForm"> 

<label for checkbox_number>Number of checkboxes :</label> 
<input id="checkbox_number" name="checkbox_number" type="number" size="1" maxlength="1" value="1" onblur="change_cb()"/> 

<input id="checkbox1" type="checkbox" name="checkbox[]" value="cb1"> 

</div> 

編輯：從您發佈的內容，你應該不需要阿賈克斯，順便說一句。