【jQuery】ラジオボタンがチェックされたら背景ハイライト

ラジオボタンがチェックされたら背景ハイライト

by tea4two

HTML

<p id="area"><label><input type="radio" name="rb" />あれ</label><label><input type="radio" name="rb" />これ</label><label><input type="radio" name="rb" />それ</label><label><input type="radio" name="rb" />どれ？</label></p>

CSS

p#area {
    padding: 5px;
}
label {
    display:block;
    padding: 5px;
}
.highlight {
background: #f00;
color: #fff;
   
}

JavaScript

$(function() {
$("#area input:radio").click(function() {
if (this.checked) {
  $("label.highlight").removeClass("highlight");
  $(this).closest("label").addClass("highlight");
}
});
});