javascriptを使用してラジオボタンを動的に作成する方法は？

配列に格納されたデータのリストを表示したい場合、それぞれのデータに対してyesとnoのラジオボタンを入れたいと思います。私はラジオボタンを動的に生成していますが、すべてのラジオボタンからは一度に1つしか選択できませんが、各データについて、はいまたはいいえのいずれかを選択できます。私がJavaScriptを初めて使う時は助けてください。javascriptを使用してラジオボタンを動的に作成する方法は？

function displayData() 
 
{ 
 
\t var data=['Apple', 'Banana', 'Kiwi']; 
 
\t var output=""; 
 
\t var output2=""; 
 
\t var dataList; 
 
\t 
 
\t for(var i=0; i< data.length; i++) 
 
\t { 
 
\t \t dataList=data[i]; 
 
\t \t output+= '<input type="checkbox" value='+dataList+' name="box2">' + ' ' + dataList+' '+'<br><br>'; 
 
\t \t output2+= 'yes:<input type="radio" value="yes" name="box2">'+'no:<input type="radio" value="yes" name="box2">'+'<br><br>'; 
 
\t \t document.getElementById("dataList").innerHTML=output; 
 
\t \t document.getElementById("radioBtn").innerHTML=output2; 
 
\t } 
 
}

<html> 
 
<body onload="displayData()"> 
 
<div class="row"> 
 
    <div class="col-sm-4"><div id="dataList"> </div></div> 
 
    <div class="col-sm-4"><div id="radioBtn"></div></div> 
 
</div> 
 
</body> 
 
</html>

出典

2017-04-07 Poppins

てみません追加してくださいコードの下に確認してくださいあなたはチェックボックスを使用しますか？ – kecalace

私はいくつかの異なる目的のためにチェックボックスを使用しており、ユーザが各データに対して1つの入力のみを選択できるようにします。 – Poppins

forループの各反復では、2つのラジオボタンが同じ名前で2つのラジオボタンを生成する必要があります。たとえば、i変数を名前に追加できます。 'yes： 'これは「いいえ」のラジオコントロールでも同様です。 –

チェックボックスの各行に異なる名前を割り当てる必要があります。

function displayData() 
    { 
     var data=['Apple', 'Banana', 'Kiwi']; 
     var output=""; 
     var output2=""; 
     var dataList; 

     for(var i=0; i< data.length; i++) 
     { 
      dataList=data[i]; 
      output+= '<input type="checkbox" value='+dataList+' name="box2'+i+'">' + ' ' + dataList+' '+'<br><br>'; 
      output2+= 'yes:<input type="radio" value="yes" name="box2'+i+'">'+'no:<input type="radio" value="yes" name="box2'+i+'">'+'<br><br>'; 
      document.getElementById("dataList").innerHTML=output; 
      document.getElementById("radioBtn").innerHTML=output2; 
     } 
    }

出典

2017-04-07 06:24:53

誤った構文、正しいアイデア。 –

私のシステムで働いています。 –

はい、私は今それを得ました、非常にありがとうございます@Pramod – Poppins

これは、ラジオボタンは、あなたの実装では、少なくとも、何のためにあるのかではありません。

はい/いいえの選択肢ごとにラジオグループ名を使用する必要があります。

HTMLプロパティーをname="box' + i + '"'のように動的名で変更すると、予期したとおりに動作します。name="box2"

出典

2017-04-07 06:24:43 pwetosaurus

あなたはラジオボタンを追加するボタン名を動的に

<input type="radio" value="yes" name="'+data[i]+'">'

デモ

function displayData() 
 
{ 
 
\t var data=['Apple', 'Banana', 'Kiwi']; 
 
\t var output=""; 
 
\t var output2=""; 
 
\t var dataList; 
 
\t 
 
\t for(var i=0; i< data.length; i++) 
 
\t { 
 
\t \t dataList=data[i]; 
 
\t \t output+= '<input type="checkbox" value='+dataList+' name="box2">' + ' ' + dataList+' '+'<br><br>'; 
 
\t \t output2+= 'yes:<input type="radio" value="yes" name="'+data[i]+'">'+'no:<input type="radio" value="yes" name="'+data[i]+'">'+'<br><br>'; 
 
\t \t document.getElementById("dataList").innerHTML=output; 
 
\t \t document.getElementById("radioBtn").innerHTML=output2; 
 
\t } 
 
}

<html> 
 
<body onload="displayData()"> 
 
<div class="row"> 
 
    <div class="col-sm-4"><div id="dataList"> </div></div> 
 
    <div class="col-sm-4"><div id="radioBtn"></div></div> 
 
</div> 
 
</body> 
 
</html>

出典

2017-04-07 06:27:58

javascriptを使用してラジオボタンを動的に作成する方法は？

答えて

関連する問題