input[type="radio"]:checkedが効かない

Question

<label>タグで囲んだ<input type="radio">にcheckedが入った時、
labelの装飾を変更したいのです。
いくつかパターンを試したのですがわからなかったのでどなたかご教授いただけましたら、と思います

echo '<label><input type="radio" name="sizeing"' . $hogehoge . '">' . "\n";
echo '<span class="size">' . $title . '</span>' . "\n";
echo '<span class="price">' . $price . '</span>' . "\n";
echo '</label>' . "\n";

label {
	width: 49.33%;
	float: left;
	border: 1px solid #ccc;
	float: left;
	margin: 0 1.33% 1.33% 0;
	padding: 9px 12px ;
	box-sizing: border-box;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;	
}
label:hover{
	background: #eee;
}

これに対し、checkedの入ったものに

.current-parts{
	background: #ffeff6;
}

この装飾を追加したいです。

試したことは以下になります。

input[type="radio"]:checked　+ label {
	background: #ffeff6;
}

cssで実装が難しい場合はjqueryでもかまいせん、
初歩的な質問で申し訳ありませんがよろしくお願いします。

Answer 1

CSSには:hasが実装されていないので、labelで囲むとだめですね

<style>
input[type="radio"]:checked+label {
  background-Color: #ffeff6;
}
</style>

<input type="radio" name="r1" value="1" id="r1_1"><label for="r1_1">aaa</label><br>
<input type="radio" name="r1" value="2" id="r1_2"><label for="r1_2">bbb</label><br>
<input type="radio" name="r1" value="3" id="r1_3"><label for="r1_3">ccc</label><br>

jQuery

<script>
$(function(){
  $('input:radio').on('change',function(){
    $('label')
      .filter(':has(input:radio:checked)').css("background-Color","#ffeff6")
      .end().filter(':not(:has(input:radio:checked))').css("background-Color","");
  });
});
</script>
<label><input type="radio" name="r1" value="1">aaa</label><br>
<label><input type="radio" name="r1" value="2">bbb</label><br>
<label><input type="radio" name="r1" value="3">ccc</label><br>

Comments

[maru_mkp]

やはりJavascriptなんですね。スクリプトが書けるように勉強します、ご教授いただき助かりました。ありがとうございました。