DOMの取得と書き換え

Question

HTML上のformタグの要素を上から取得し、
Javascriptにて、新しい element input type hiddenをとして作成し、内容をコピー 新しいformタグの下に
appendchildした。
この時、radio ボタンはチェックされているもののみappendしたい。 空の場合も１つだけinput elementとして作成したい
判定するすべはあるか

Answer 1

<form id="base_form">
  <input type="radio" name="exam01" id="exam01_1" value="1" checked/><label for="exam01_1">1</label>
  <input type="radio" name="exam01" id="exam01_2" value="2"/><label for="exam01_2">2</label>
  <input type="radio" name="exam01" id="exam01_3" value="3"/><label for="exam01_3">3</label>
</form>
<form id="new_form"></form>

var targets = document.querySelectorAll("#base_form input[type=radio]:checked");
var df = document.createDocumentFragment();

for (var i = 0, len = targets.length; i < len; ++i) {
  var e = targets[i].cloneNode(false);
  var l = targets[i].nextSibling.cloneNode(true);
  df.appendChild(e);
  df.appendChild(l);
}
if (!df.hasChildNodes()) {
  var radio = document.createElement("input");
  var label = document.createElement("label");
  var val = 99;
  radio.type  = "radio";
  radio.name  = "exam01";
  radio.id    = [name, val].join("_");
  radio.value = val;
  label.for = radio.id;
  label.appendChild(document.createTextNode(val));
  df.appendChild(radio);
  df.appendChild(label);
}
document.getElementById("new_form").appendChild(df);

こういうことでしょうか？動作検証はしていません。

Comments

[motokix]

clone元のnode のradio.name に当たる部分が不特定な場合 でも有効でしょうか

[htsign]

不特定というのがよく分かりませんが、場合によってnameが任意に変わるということでしょうか。
Array.prototype.map.call(
document.querySelectorAll("#base_form input[type=radio]"),
function(e) { return e.name; })
.filter(function(e, i, arr) { return e !== void 0 && arr.indexOf(e) === i; })
で #base_form 以下の全ての name が配列で得られると思いますので、これを使って振り分けられると思います。