input:radio内の要素を、チェックが入った場合に透明度を1にしたい

疑似要素::afterを、input:radioにチェックが入った場合の透明度を1にしたいのですが動きません。
ご助力いただけましたらと思います。

html
1<span class="wpcf7-list-item">
2 <label>
3  :before
4  <input type="radio" name="radio-256" value="dammy1" />
5  <span class="wpcf7-list-item-label">dammy1</span>
6  :after
7 </label>
8</span>

css
1span.wpcf7-list-item label {
2	position: relative;
3	padding: 0 0 0 20px;
4}
5span.wpcf7-list-item label:after,
6span.wpcf7-list-item label:before{
7	position: absolute;
8	content: "";	
9	display: block;	
10}
11span.wpcf7-list-item label:after {
12	top: -1px;
13	left: 0px;
14	width: 16px;
15	height: 16px;
16	border: 1px solid #ccc;
17	border-radius: 50%;
18	background: #fff;
19}
20span.wpcf7-list-item label:before {
21	top: 0;
22	left: 3px;
23	margin-top: 2px;
24	width: 10px;
25	height: 10px;
26	background: #c04383;
27	border-radius: 50%;
28	opacity: 0;
29	z-index: 10;
30}

試したこと（１）

jquery
1$(function(){
2  $('.wpcf7-list-item input:radio').on('change',function(){
3    $('span.wpcf7-list-item label::before')
4      .filter(':has(input:radio:checked)').css('opacity','1')
5      .end().filter(':not(:has(input:radio:checked))').css('opacity','0');
6  });
7});

試したこと（２）

css
1span.wpcf7-list-item label input[type="radio"]:checked + label:before {
2	opacity: 1;
3}

何日も行き詰まってしまい困っています、なにか知恵をいただけましたら幸いです。よろしくお願いします。

→（１）にCSSを追加して修正できました。ご教授いただきありがとうございました。

Javascript
1$(function(){
2  $('.wpcf7-list-item input:radio').on('change',function(){
3    $('span.wpcf7-list-item label')
4      .filter(':has(input:radio:checked)').addClass("active")
5      .end().filter(':not(:has(input:radio:checked))').removeClass("active");
6  });
7});

css
1span.wpcf7-list-item label:before {
2	top: 0;
3	left: 3px;
4	margin-top: 2px;
5	width: 10px;
6	height: 10px;
7	background: #c04383;
8	border-radius: 50%;
9	opacity: 0;
10	z-index: 10;
11}
12span.wpcf7-list-item label.active:before {
13opacity: 1; //labelに.activeのクラスがついたときに透明度を1にする
14}

行動規範の内容に同意します

回答3件

ベストアンサー

方法1では疑似要素はJavaScriptで操作できない、方法2では内側の<input>の変化で外側の<label>要素のCSSを変化させる方法がない、ということで、どちらもできません。

チェックボックスの変化で<label>のclassを変化させて、それで:afterを表示させるCSSを切り替える、という合わせ技を取るしかないと思います。

投稿2018/10/17 01:32

maisumakun

総合スコア146581

maru_mkp

2018/10/17 02:24

ありがとうございました！無事解決できました。疑似要素はJavascriptでは操作できないということ必ず覚えておきます。助かりました。

行動規範の内容に同意します

なぜそこに丸が欲しいのかよくわかりませんが、

css
1span.wpcf7-list-item label:before {
2    top: 0;
3    left: 3px;
4    margin-top: 2px;
5    width: 10px;
6    height: 10px;
7    background: #c04383;
8    border-radius: 50%;
9    opacity: 0;
10    z-index: 10;
11}

を消して

css
1span.wpcf7-list-item label input[type="radio"]:checked+:after{
2  display:inline-block;
3  top: -1px;
4  left: 0px;
5  width: 16px;
6  height: 16px;
7  border: 1px solid #ccc;
8  border-radius: 50%;
9  background: #fff;
10  content:'';
11}

html
1</style>
2<span class="wpcf7-list-item">
3 <label>
4  :before
5  <input type="radio" name="radio-256" value="dammy1" />
6  <span class="wpcf7-list-item-label">dammy1</span>
7 </label>
8</span>

はどうでしょう？

投稿2018/10/17 02:57

colling

総合スコア798

不完全ですが、ヒントになれば、、

CSS
1span.wpcf7-list-item label input[type="radio"]:checked + :after {
2    content:':after';
3}

↑　+の後は、labelいらないみたいですよ。

html
1<span class="wpcf7-list-item">
2 <label>
3  :before
4  <input type="radio" name="radio-256" value="dammy1" />
5  <span class="wpcf7-list-item-label">dammy1</span>
6 </label>
7</span>