javascriptでvalueを変化させる方法

Question

###■目的
ラジオボタンを選択→別のラジオボタンのvalueが連動

という機能を作りたいです。

下記にまとめておきました。
https://jsfiddle.net/duxg7b4f/2/

上記のコードはこちらです。

<p>【連動ボックス】</p>
<input id='abc' type=radio value='ここを連動させたい'>

<p>【選択ボックス】</p>
<div class="select-a">
<input type="radio" name="slider" value="a1">a1
<input type="radio" name="slider" value="a2">a2
<input type="radio" name="slider" value="a3">a3
</div>

<div class="select-b">
<input type="radio" name="slider" value="b1">b1
<input type="radio" name="slider" value="b2">b2
</div>

javascriptでvalueを変化させる。だなんて、できるでしょうか？

お詳しい方、よろしくお願いいたします。m(_ _)m

Answer 1

こうでしょうかね？

addEventListener("load",function(){
  var target = document.getElementById("abc");
  document.getElementsByName("slider").forEach((e) => {
    e.addEventListener("change",function(){
      target.value = this.value;
    },false);
  });
},false);

jsFiddle

Comments

[退会済みユーザー]

こんばんは★ありがとうございます。

…んっと、【連動ボックス】のラジオボタンのvalueを連動させたいのですけれど、そちらのｊｓを書いても、何も連動しない様子でした。(>_<)

また何か思いつくことがあれば、なんでもおっしゃってくださいませ。

[namnium1125]

addEventListener("load",...

でロードイベントを設定しているのですが多分それが原因になっているのかもしれません。(というか少しはコードの意味を考えながら組み込んで欲しいです…)

ここが初心者のネックになるところですから。

確認してみてください。m(_ _)m

またjsFiddleのサンプルも付けましたので合わせてどうぞ。

[退会済みユーザー]

>というか少しはコードの意味を考えながら組み込んで欲しいです…

まったくおっしゃるとおりです！！笑
サンプル、ほんとですね、できてますものね。誠にありがとうございますm(_ _)m

Answer 2

こんな感じです

#abc[value="a1"]+span::before{content:"a1";}
#abc[value="a2"]+span::before{content:"a2";}
#abc[value="a3"]+span::before{content:"a3";}
#abc[value="b1"]+span::before{content:"b1";}
#abc[value="b2"]+span::before{content:"b2";}

document.addEventListener('change',function(e){
  var t=e.target;
  if(t.name=="slider"){
    document.querySelector('#abc').value=t.value;
  }
});

<p>【連動ボックス】</p>
<input id='abc' type='radio' value='ここを連動させたい'>
<span></span>

<p>【選択ボックス】</p>
<div class="select-a">
<input type="radio" name="slider" value="a1">a1
<input type="radio" name="slider" value="a2">a2
<input type="radio" name="slider" value="a3">a3
</div>

<div class="select-b">
<input type="radio" name="slider" value="b1">b1
<input type="radio" name="slider" value="b2">b2
</div>

Comments

[退会済みユーザー]

こんばんは。

大変失礼いたしました！今別の方のコメントを拝見し、こちらのご回答に気づきました。ごめんなさい。

実は a1 a2 a3 b1 b2 などはwordpressの記事ごとに c1 c2 c3 … などなど、と大量にあるので、CSSでそれらをすべて書いていくのはちょっと億劫かもしれません。

今回は別の方をベストアンサーにさせていただきました。
ご回答まことにありがとうございます。

[yambejp]

> CSSでそれらをすべて書いていくのはちょっと億劫

説明が足りなくてすみません
radioのvalueを変えただけでは見た目がかわらないので
valueが変わってますよとCSSで補足しているだけです
CSSを書かなくても例示のjavascriptでご希望の機能は充足していると思います

[退会済みユーザー]

なるほど。ほんとですね。さすがのお気遣い、痛みいりまする。

Answer 3

// [name="slider"] 全てに "change"イベントを付与
document.querySelectorAll('[name="slider"]').forEach(function(element) {
  element.addEventListener("change", function() {
    // #abcのvalueを変更後のラジオボタンの値に変更
    document.getElementById("abc").value = this.value;
  }, false);
});

Comments

[退会済みユーザー]

おおおお！できました！完璧でございます。どうもありがとうございます!!

[退会済みユーザー]

夜分にすみませんっ！(>_<)

連動させるタイミングなのですけれど、

ラジオボタンを選択したタイミングではなく、

「ボタン」をクリックしたタイミングで連動させるためには、どうすればいいか、ご教示いただけませんでしょうか？

https://jsfiddle.net/duxg7b4f/20/

[退会済みユーザー]

// [name="slider"] 全てに "change"イベントを付与
document.querySelectorAll('[name="slider"]').forEach(function(element) {

$(".btn").click(function(){
element.addEventListener("change", function() {
// #abcのvalueを変更後のラジオボタンの値に変更
document.getElementsByClassName("abc")[0].value = this.value;
}, false);
})
});

などでは、できませんでした。。

[退会済みユーザー]

「ボタンをクリックすると#abcの値を選択中のラジオボタンの値に変更する」と捉えてお答えすると

$(".btn").click(function(){
　var checked = document.querySelector('[name="slider"]:checked');
　document.getElementsByClassName("abc")[0] = checked.value;
});
インデントに全角の空白を入れているので除去してください。

やり方は色々あるので試してみてください。

[退会済みユーザー]

全角を削除したみたのですけれど、んっと、、

<script>
$(".btn").click(function(){
var checked = document.querySelector('[name="slider"]:checked');
document.getElementsByClassName("abc")[0] = checked.value;
});
</script>

ということですよね？

うーん、連動してくれない様子です。。
https://jsfiddle.net/duxg7b4f/33/

お手すきの折にまたご意見頂戴できましたら幸いです。m(_ _)m

[退会済みユーザー]

失礼しました。valueに入れてあげてください
- document.getElementsByClassName("abc")[0] = checked.value;
+ document.getElementsByClassName("abc")[0].value = checked.value;

[退会済みユーザー]

できました！どうもありがとうございます。とても助かりました。