javascriptでradioボタンの値を１行で取得する方法

jqueryを使うとまあ一発で取得できるのだが、素のJavaScriptを使うと結構めんどくさかったりする処理。

例として、次のような選択形式から、チェックされた値を取り出す処理を考える。

<label><input name="note" type="radio"/> 決めていない</label>
<label><input name="note" type="radio" value="mobile" checked/> モバイルノート(~13.5インチ)</label>
<label><input name="note" type="radio" value="standard"/> スタンダードノート(14インチ~)</label>
<label><input name="note" type="radio" value="gamingnote" /> ゲーミングノート</label>

まず最初に思いつくのが、要素の値を取得し、それをforループでぐるぐる回して取得する方法

const elements = document.getElementsByName( "note" );
let value;
for (var i = 0, i = elements.length; i++) {
  if(elements[i].checked) {
    value = elements[i].value ;
    break;
  }
}

しかし単純な作業に対して行数が多すぎる。ということで以下のコードで一発で取得する。

Array.apply(null, document.getElementsByName('note')).filter(elem => elem.checked)[0].value;

トリックとしてはdocument.getElementsByName('note')だとnodeListの形式で値が返り、filter関数が使えないが、Array.applyを使うことによりfilter関数を借りて使うことができる。