jquery ui ul 内のinputタグのvalueの取得

Question

<ul id="graphic">
    <li>
        <input type="radio" value="1920,1080" id="fullHD" checked>
        <label for="fullHD"><span></span>フルHD（1920×1080）</label>
    </li>
    <li>
        <input type="radio" value="1280,720" id="HD">
        <label for="HD"><span></span>HD（1280×720）</label>
    </li>
</ul>

上記のようなhtmlがあったとして<li>内の<input>のvalueを取得するにはどうすればよろしいですか？

//クリックされた物のvalueを取得したい
$(document).on('change','#graphic li',function(){
    var index = $('#graphic li').index(this)
    var li = $('#graphic li')[index]
    console.log(li)
});

クリックされたliまでは取得できるのですが、chirdrenやfindでvalueを取得できると思ったのですがエラーになってしまいうまく行きませんでした。

Comments

[m.ts10806]

changeになってますが、clickイベントが欲しいんですか？

[madoka9393]

本質問からは少々ずれますが、現在の実装だとそれぞれのラジオボタンが独立してしまっているのですがそれは問題ないんですかね…？

Answer 1

liにchangeイベントは効かないでしょう

$(document).on('change','#graphic input',function(){
  console.log($(this).val());
});