selectとradioのvalueの評価完全に理解した(jQuery)

selectのノリでradioを使ったときにハマったのでメモ

by mtane0412

HTML

<h1>
selectとradioのvalueの評価完全に理解した(jQuery)
</h1>
<h2>
select
</h2>
<p>selected(selector): <span id="select-result-selector">A</span>
</p>
<p>selected(this): <span id="select-result-this">A</span>
</p>
<select name="hoge">
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
</select>

<h2>
radio
</h2>
<p class="red">checked(selector): <span id="radio-result-selector">A</span>
</p>
<p>checked(this): <span id="radio-result-this">A</span>
</p>
<p>checked(checked): <span id="radio-result-checked">A</span>
</p>
<input type="radio" name="fuga" value="A" checked /> A
<input type="radio" name="fuga" value="B" /> B
<input type="radio" name="fuga" value="C" /> C

CSS

.red {
  color: red;
}

JavaScript

$('select[name="hoge"]').change(function() {
  $('span#select-result-selector').text($('select[name="hoge"]').val());
	$('span#select-result-this').text($(this).val());
});


$('input[name="fuga"]').change(function() {
  $('span#radio-result-selector').text($('input[name="fuga"]').val());
	$('span#radio-result-this').text($(this).val());
  $('span#radio-result-checked').text($('input[name="fuga"]:checked').val());
});