web-dev-qa-db-ja.com

JavaScriptを使用してチェックボックスを動的に作成しますか？

次のHTML/JavaScriptを使用してチェックボックスを動的に作成しようとしています。なぜ機能しないのでしょうか？

<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>
javascripthtmlcheckbox
39
Sandeep Giri

入力要素内にテキストノードを配置しようとしています。

入力要素は空であり、子を持つことはできません。

...
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);
100
Quentin

最後の行は次のようになります

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

チェックボックス自体ではなく、チェックボックスと同じコンテナにテキスト（ラベル？）を追加します

4
David Snabel-Caunt
   /* worked for me  */
     <div id="divid"> </div>
     <script type="text/javascript">
         var hold = document.getElementById("divid");
         var checkbox = document.createElement('input');
         checkbox.type = "checkbox";
         checkbox.name = "chkbox1";
         checkbox.id = "cbid";
         var label = document.createElement('label');
         var tn = document.createTextNode("Not A RoBot");
         label.htmlFor="cbid";
         label.appendChild(tn); 
         hold.appendChild(label);
         hold.appendChild(checkbox);
      </script>
0
user9991632

関数を作成できます：

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;
}

そして、あなたは次のような電話をします：

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