dポイントプレゼントキャンペーン実施中！

うーん・・・

ラジオボタンのvalueとlabelの値を連想配列で取得したい

解決済

  • 質問者：ふなふ-な
  • 質問日時：
  • 回答数：5件

クリックでリンク移動するラジオボタンをjavascriptで作成中です。
idを配列順に連番で名称設定しつつ、valueとlabelの値を連想配列で
取得したいと考えたのですが、配列の理解が及んでおらず行き詰っています。

▼このようにしたいのですが、お知恵を拝借いただけませんでしょうか
------------------------
<input id="tab0" name="tabgroup1" value="?view=1111" type="radio" />
<label for="tab0">50音順</label>
<input id="tab1" name="tabgroup1" value="?view=2222" type="radio" />
<label for="tab1">新着順</label>
------------------------

var values = {"?view=1111":"50音順", "?view=2222":"新着順"};
create_radio(values);

function create_radio(values) {
var tabarea = document.createElement('div');
tabarea.id ='tabarea';
for (var i = 0; i < values.length; i++) {
var radio = document.createElement('input');
var label = document.createElement('label');
var id = "tab" + i;
var name = "tabgroup1";
var value = values[i];
adio.setAttribute("type", "radio");
radio.setAttribute("value", value);
radio.setAttribute("id", id);
radio.setAttribute("name", name);
label.setAttribute("for", id);
label.innerHTML = values[key];

var radio_view_id = "?view=" + event.viewId;

if(value == radio_view_id){
radio.checked = true;
}
radio.onclick = function() {
location.href = this.value;
}
tabarea.appendChild(radio);
tabarea.appendChild(label);

}

質問者からの補足コメント

  • 連想配列はインデックスが数字じゃなくて文字列なんですね…。そしてkey:値 で逆のようです。
    JavaScript初心者なもので色々と混乱しております。
    もう少しネットのドキュメントを読み込んで研究します。
    お恥ずかしい質問をしてしまいすみませんでした。

    No.1の回答に寄せられた補足コメントです。 補足日時：2018/11/21 20:23
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.2ベストアンサー

  • 回答者： yambejp
  • 回答日時：

とりあえず整理しました



<script>
var values = [
{
"name":"tabgroup1",
"target":"#view1",
"item":[
{
"id":"tab1",
"value":"?view=1111",
"text":"50音順"
},
{
"id":"tab2",
"value":"?view=2222",
"text":"新着順"
},
],
},
];
window.addEventListener('DOMContentLoaded', function(e){
var view1=document.querySelector('#view1');
values.forEach(function(x){
x.item.forEach(function(y){
var inp=document.createElement('input');
inp.setAttribute("type","radio");
inp.setAttribute("name",x.name);
inp.setAttribute("id",y.id);
inp.setAttribute("value",y.value);
view1.append(inp);
var lab=document.createElement('label');
lab.setAttribute("for",y.id);
lab.appendChild(document.createTextNode(y.text));
view1.append(lab);
});
});
});
</script>
<div id="view1"></div>
    • good
    • 0
    • 件
通報する
この回答へのお礼

このようなど素人のはちゃめちゃな質問にお答え頂きありがとうございました。このように整理することが出来るのですね…！連番にする＝配列にしなければ？！と思い込んでいました。forEachを使えばこんなにすっきり…。ありがとうございました！教えて頂いたコードと睨めっこして勉強し直します。

通報する
お礼日時：2018/11/21 20:55

No.5

  • 回答者： amanojaku6
  • 回答日時：

ちなみに「location.href」にはアドレス(相対指定の場合はファイル名)を代入しねければなりません。



>?view=1111
>?view=2222

↑これはファイル名ではありませんよね？、パラメータですか？
パラメータを指定したい場合はファイル名も必須です。
「hoge.html」と言うファイルに「?view=1111」と言うパラメータを付与したい場合は

location = "hoge.html?view=1111";

となります(「location.href」でないことに注意して下さい)。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： amanojaku6
  • 回答日時：

<!-- これを、新しいファイルに そのままコピペして下さい。

-->
<!-- charsetはShift-JISに設定しています。 -->
<!-- とりあえず、こちらの理解でプログラミングしています(全く別モノのようなプログラムに見えるかもしれませんが)。 -->
<!-- 連想配列なし(inputのvalueもなし)のバージョン(プログラムがスッキリしますね) -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS">
<TITLE>test</TITLE>
</head>
<body>

<script type="text/javascript">
<!--
d2Values = [ // 2次元配列
["?view=1111", "50音順"],
["?view=2222","新着順"]
];
for(let i = 0; i<d2Values.length; i++){
document.write('<input id="tab'+i+'" name="tabgroup1" type="radio" onclick="RadioClick(\''+d2Values[i][0]+'\');"/>');
document.write('<label for="tab'+i+'" >'+d2Values[i][1]+'</label>');
function RadioClick(v){
alert(v); // どんな値が渡されているかalertで表示させる。
// location.href = v; // (こちらでは遷移させないので)とりあえず ここはコメントにしてます。
}
}
// -->
</script>

</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

二次元配列というやり方もあるのですね…
驚きのコンパクトさです。配列の奥深さを感じます。
ただ、「document.write can be a form of eval」という
エラーがどうしても出てしまうのと、
今回は要素の配置まで動的にする必要があったことから
低レベルな私でも理解がしやすかった下の回答者様のやり方をベースにコードを修正いたしました。
もっと勉強して二次元配列もマスターしてみたいです。
このたびはありがとうございました！

通報する
お礼日時：2018/11/22 11:56

No.3

  • 回答者： amanojaku6
  • 回答日時：

<!-- これを、新しいファイルに そのままコピペして下さい。

-->
<!-- charsetはShift-JISに設定しています。 -->
<!-- とりあえず、こちらの理解でプログラミングしています(全く別モノのようなプログラミムに見えるかもしれませんが)。 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS">
<TITLE>test</TITLE>
</head>
<body>

<script type="text/javascript">
// (とりあえず連想配列は作ってますが)この場合、連想配列は必要ないでしょう。
// (とりあえずinputのvalueは設定してありますが)inputのvalueも使ってません。
// var values = {"1111":"50音順", "2222":"新着順"};
values = new Array( );
d2Values = [ // 2次元配列
["?view=1111", "50音順"],
["?view=2222","新着順"]
];
for(let i = 0; i<d2Values.length; i++){
values[d2Values[i][0]] = d2Values[i][1];
// document.write('<br>');
document.write('<input id="tab'+i+'" name="tabgroup1" value="'+d2Values[i][0]+'" type="radio" onclick="RadioClick(\''+d2Values[i][0]+'\');"/>');
document.write('<label for="tab'+i+'" >'+d2Values[i][1]+'</label>');
/*
document.write(
d2Values[i][0]+'; '
+values[d2Values[i][0]]+'; '+
'');
document.write('<br>');
*/
function RadioClick(v){
alert(v); // どんな値が渡されているかalertで表示させる。
// location.href = v; // (こちらでは遷移させないので)とりあえず ここはコメントにしてます。
}
}
// -->
</script>

</body>
</html>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yambejp
  • 回答日時：

var values = {"?view=1111":"50音順", "?view=2222":"新着順"};



これはひどいね、データ整理してよいのかしら？
idやnameをどこからもっていくのか決めたほうがよいでしょう
この回答への補足あり
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報