おけらのブログ++

駆け出しWebエンジニアの奮闘記

jQueryを使ってRadioBottunの値を取得する

今回はHTMLでRadioBottunを使用した場合に、その値をjQueryで取得する方法を記載します。

 ArtistとAlbumという2つの値を準備しておき、デフォルトでArtistにチェックが入っている例です。またjQueryで使う目印としてname="type"という属性をつけておきます。

index.html

<p class="radio-area">
    <input type="radio" name="type" value="Artist" checked="checked">Artist
    <input type="radio" name="type" value="Album">Album
</p> 

そしてjQueryでは`$('input[name=type]:checked').val();`という記述で、現在選択されているRadioBottunのValueである"Artist"が取得されます。

 

main.js

$("#searchbox").click(function() {
    radiobottunの値を取得
    var value = $('input[name=type]:checked').val();
    console.log(value);
}); 

 

簡単ですが意外とよく使いそうなので メモしておきます。

qiita.com