如何使用jQuery動態的增加CheckBoxList的項目

這篇紀錄一下如何使用jQuery動態的增加CheckBoxList的項目。

圖片來源Designed by Freepik

---

首先常見的CheckBoxList可能會長的像以下這樣

<SPAN id='CheckBoxList1'>
<INPUT id='CheckBoxList1_0' type=checkbox value="" name='CheckBoxList1$0'>
<LABEL for='CheckBoxList1_0'>CheckBox01</LABEL>
<INPUT id='CheckBoxList1_1' type=checkbox value="" name='CheckBoxList1$1'>
<LABEL for='CheckBoxList1_1'>CheckBox02</LABEL>
</SPAN>


這時候我們就可以利用以下的jQuery新增CheckBoxList內的數量

function addCheckbox(name) {
   var container = $('#CheckBoxList1');
   var inputs = container.find('input');
   var id = inputs.length+1;

   $('<input />', { type: 'checkbox', id: 'CheckBoxList1_'+id, value: name, mane: 'CheckBoxList1$'+id }).appendTo(container);
   $('<label />', { 'for': 'CheckBoxList1_'+id, text: name }).appendTo(container);
   $('<br />').appendTo(container);
}

很簡單吧！