Как задать стиль родителя при input:checked?

Question

[Александр Донов]

Суть такова:

<div class="popup">
<table>
<tbody>
<tr>
<td style="width: 15%;"><h3>500</h3><input type="checkbox" checked="checked" onchange="calc()"
 value="500" id="key2"></td>
<td><strong>Выделить анкету</strong>выделите вашу анкету среди прочих 
(в 3 раза больше просмотров)</td>
</tr>
</tbody>
</table>
</div>

Хочу задать .popup table{border-bottom: 10px solid #FFB2B2;}
при input[type=checkbox]:checked

Как это реализовать(желательно CSS)?

Answer 1

[Виталий Инчин ☢]

CSS на такое не способен. Если интересует вариант на JS:

document.querySelector("input[type=checkbox]").onchange = function(){
   document.querySelector("table").classList.toggle("check", this.checked);
}

.check{
  border-bottom: 10px solid #FFB2B2;
}

В живую тут.

Answer 2

[Александр Донов]

Решил следующим образом:

if(key1.checked == true)
key1_p.className='act0';
else
key1_p.className='';

.act0{border-bottom: 10px solid #FFB2B2!important;}

<table  id="key1_p"><tbody><tr>
<td style="width: 15%;"><h3>300</h3><input type="checkbox" checked="true" onchange="calc()" value="300" id="key1"></td>
<td style="width: 65%;"><strong>Поднять в поиске</strong><br >простое поднятие Вашей анкеты в результатах поиска</td>
</tr></tbody></table>

Answer 3

[Дмитрий Ким]

Нет такой возможности в CSS.

Comments

[Дмитрий Королёв]

Уточню: сейчас нет. https://drafts.csswg.org/selectors-4/#relational

Answer 4

[Nik7Name]

Можно использовать некоторые псевдо эффекты ( что бы менять бордеры). Если ещё актуально...