Script.js
まずcheckbox_displayというID持ってるElementが存在するかどうかをチエックします。もしあったら削除。
htmlのBodyを取ります。
Input部品一つ作り、
- typeは’checkbox’にします。
- valueはTextlistの内容のままにします。
- nameはTextlistの内容のままにします。
- idはTextlistの内容プラス_checkboxにつける。
そしてLabelを作る。Checkboxの隣の文字を表示させるために。
最後はBodyにAppendします。
もしCheckboxをJSでCHECKしたいのならcheckbox.checked=trueすればOK。
| function addCheckBox(textlist,eleid){ var ele=document.getElementById(eleid) if (ele!= null){ ele.remove() } var linebreak = document.createElement(“br”); var body=document.getElementsByTagName(‘body’)[0] for (var i = 0; i < textlist.length; i++) { var ck=document.createElement(‘input’) ck.type=”checkbox” ck.name=textlist[i] ck.value=textlist[i] ck.id=textlist[i]+’_checkbox’ var label=document.createElement(‘label’) label.htmlFor=’id’ label.appendChild(document.createTextNode(textlist[i])) ele.appendChild(ck) ele.appendChild(label) body.appendChild(ele) } } var xx=[‘a’,’b’,’c’] addCheckBox(xx,’checkbox_display’) |
Index.html
| <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id=’checkbox_display’></div> <script type=”text/javascript” src=”script.js”></script> </body> </html> |
結果：
