1

IE、Firefox、およびChromeで動作するhtml（およびjavascript）で動的ラジオボタンを作成するための実用的なコードを誰かに教えてもらえますか?

インターネットで多くのコードを見ましたが、どれもうまくいきませんでした。

また、ラベルが必要です。そして、私はJqueryを使いたくありません。

このコードを試しました：

function test() {
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute('type', 'radio');
element.setAttribute('value', 'source');
element.setAttribute('name', 'source'); 
element.setAttribute('id', 'source_id');
var foo = document.getElementById("divTxt");
foo.appendChild(element);
var newlabel2 = document.createElement("Label"); 
newlabel2.for = "source_id";
newlabel2.innerHTML = "first name ";
foo.appendChild(newlabel2);
}
4

2 に答える 2

3 
var radio1 = document.createElement('input');
radio1.id = 'myRadioId1';
radio1.type = 'radio';
radio1.name = 'radioGroup';
radio1.value = 'someValue1';

var radio2 = document.createElement('input');
radio2.id = 'myRadioId2';
radio2.type = 'radio';
radio2.name = 'radioGroup';
radio2.value = 'someValue2';

var label1 = document.createElement('label');
label1.htmlFor = radio1.id;
label1.innerHTML = 'label for radio1';

var label2 = document.createElement('label');
label2.htmlFor = radio2.id;
label2.innerHTML = 'label for radio2';

コンテナへの追加:

var container = document.getElementById('mydivid');
container.appendChild(radio1);
container.appendChild(label1);
container.appendChild(radio2);
container.appendChild(label2);

ラジオグループが必要な場合は、それらに同じ名前を付ける必要があります。ここにフィドルがあります

于 2013-04-24T06:19:15.517 に答える
2

コードの主な問題 (コメントに投稿し、質問にコピーしました) は、関数定義のみが含まれていることです。関数はまったく呼び出されないため、 のようなステートメントが必要test()です。id=divTxtさらに、この関数は、ページに要素があり、その要素が関数を呼び出す前に表示されなければならないことを前提としています。次のコードは、ラジオ ボタン要素とそのラベルを正常に作成し、ページ上の既存の要素に挿入します。

<!DOCTYPE html>
<title>Demo</title>
<div id=divTxt></div>
<script>
function test() {
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute('type', 'radio');
element.setAttribute('value', 'source');
element.setAttribute('name', 'source'); 
element.setAttribute('id', 'source_id');
var foo = document.getElementById("divTxt");
foo.appendChild(element);
var newlabel2 = document.createElement("Label"); 
newlabel2.setAttribute('for', "source_id");
newlabel2.innerHTML = "first name ";
foo.appendChild(newlabel2);
}
test();
</script>

(このプロパティは JavaScript では使用できませんfor。プロパティ名は ですが、上記のように属性htmlForを設定する方がおそらく簡単です。)for

ただし、ラジオ ボタンはその性質上、常にグループで表示される必要があるため、いくつかの引数を指定した関数を使用して、共通のパターンに従って一連のラジオ ボタンを生成する必要があります。このような：

<!DOCTYPE html>
<title>Demo</title>
<div id=divTxt></div>
<script>
function radio(name, value, text) {
var element = document.createElement("input");
var id = name + value;
element.setAttribute('type', 'radio');
element.setAttribute('value', value);
element.setAttribute('name', name); 
element.setAttribute('id', id);
var foo = document.getElementById("divTxt");
foo.appendChild(element);
var newlabel2 = document.createElement("label"); 
newlabel2.setAttribute('for', id);
newlabel2.innerHTML = text;
foo.appendChild(newlabel2);
}
radio('sex', '0', 'male');
radio('sex', '1', 'female');
</script>

アイテム間に改行を追加するコードを追加するか、できればボタンとそのラベルの各ペアを要素内に配置して、これを最小限に強化する必要がありますdiv。

于 2013-04-24T07:34:59.687 に答える