$('.target')[0].children とした時に、取得できる、ラジオボックスにおいて、
現在、ラジオボックスで、選択されている方の値と、そのidを取得したいのですが、
childerenの後からどうしたら良いのかがわかりません。

最終的にやりたいのは
ラジオボックスの値が変化したときに発火し、その時の値を取得し、ajaxでPOSTすることです。

値が変化したとき、というのは .on 'change' でいけるみたいなので、それで実装しております。

$('.target')[0].children
=> [div.m-radio, div.m-radio]

div.m-radio の innnerHTML
<input id="20" name="hoge" type="radio" value="true"><label for="hoge">true</label>

よろしくお願いします。

全体のHTML

<div class="target">
  <div class="m-radio">
    <input id="20" name="hoge" type="radio" value="true">
    <label for="20">true</label>
  </div>
  <div class="m-radio">
    <input id="20" name="hoge" type="radio" value="false">
    <label for="20">false</label>
  </div>
</div>

追記

ちなみに、今回のページでは、
ラジオボックスが10個程あります。
そのため、一つだけを前提にしたコードではなく、複数あることを前提に実装する必要が御座います。

行動規範の内容に同意します

回答4件

JavaScript
1$(function(){
2  $('.target input:radio[name=hoge]').on('change', function() {
3    // 非チェック状態のときはスキップ
4    if ($(this).prop('checked')) {
5      var value = $(this).val(); // true or false
6      var id = $(this).attr('id'); // 20 or 20 ?
7      console.log(value);
8      console.log(id);
9    }
10  });
11});

投稿2016/12/13 11:28

naomi3

総合スコア1105

ベストアンサー

javascript
1$(function(){
2    $(":radio").on('change', function(){
3        var checked = $(this).prop('checked');
4        var id = this.id;
5        console.log(checked);
6        console.log(id);
7    });
8});

投稿2016/12/13 07:26

退会済みユーザー

総合スコア0

:checked セレクタで要素を特定し、.val()で値を取り出せばOK.

投稿2016/12/13 07:09

katsuya141

総合スコア367

qaz3330

2016/12/13 07:16

ご回答有難う御座います。以下の記事などを参照し、checkedセレクタを使用しているのですが、上手くいきません。。。 https://www.softel.co.jp/blogs/tech/archives/2488 ・$('.reservation')[0].children:checked ・$('.reservation')[0].children.checked ・$('.reservation')[0].children.filter(":checked") また、こちら記載し忘れておりましたので、後ほど本文にも追記致しますが、ラジオボックスが10個程あります。そのため、一つだけを前提にしたコードではなく、複数あることを前提に実装する必要が御座います。

katsuya141

2016/12/13 07:22

イベントが起こったエレメントが$(this)ですから、そこから追ったほうがいいです

行動規範の内容に同意します

idに数字だけ（数字からはじまる文字列）をつけるのはNGです
また、ご提示のソースのラジオボタンは同名で管理されているものが存在してないので
ラジオボタンの体をなしていませんが、なにかしら拡張してつかうということでしょうか？

追記

ラジオボタンのchangeはcheckedが外れるときには発動しないようなので
以下で十分かもしれません
なおidはユニークにつけてください

HTML
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $('.target input[type=radio]').on('change',function(){
5    console.log($(this).val())
6    console.log($(this).prop('id'))
7  });
8});
9</script>
10<div class="target">
11  <div class="m-radio">
12    <input id="x20" name="hoge" type="radio" value="true">
13    <label for="x20">true</label>
14  </div>
15  <div class="m-radio">
16    <input id="x21" name="hoge" type="radio" value="false">
17    <label for="x21">false</label>
18  </div>
19  <div class="m-radio">
20    <input id="x22" name="hoge" type="radio" value="test">
21    <label for="x22">test</label>
22  </div>
23</div>