Выделение строки цветом при нажатии на radio

207

13 апреля 2022, 07:20

Всем привет, есть такой код

 <section style="margin-top: 5%;">
     
     
   <div class="license" id="onel">
     <div style="width: 50%; text-align: left; float: left;" > <label ><input class="lic" name="chose" type="radio" value="one" id="one" checked="checked">LICENSE PLAN#1</label></div>
     <div style="width: 50%; text-align: right; float: left;"><label style="float: right">13</label></div></div> 
     
     <div class="license" id="twol">
     <div style="width: 51%; text-align: left; float: left;" > <label ><input class="lic" name="chose" type="radio" value="two" id="two">LICENSE PLAN#2</label></div>
         <div style="width: 49%; text-align: right; float: left;"><label style="float: right">22</label></div></div>
     
     <div class="license" id="threel">
     <div style="width: 50%; text-align: left; float: left;"  > <label ><input class="lic" name="chose" type="radio" value="three" id="three">LICENSE PLAN#3</label></div>
     <div style="width: 50%; text-align: right; float: left;"><label style="float: right">34</label></div></div>
    
    
     
  
     
     </section>
 </div

Как сделать так, чтобы по нажатию на radio выделялась целиком вся строка? Если при текущей верстки сделать такое нельзя, то предложите иной вариант с решением) Буду очень признательна, весь интернет уже облазила(

Как должно выглядеть (пример)

Answer 1

Если чуть-чуть переставить <label> то достаточно будет обойтись и css.

Или вам обязательно сохранить ту разметку, что есть?

Небольшие пояснения:

элемент <input type = 'radio'> ставим перед всей графикой, которую хотим отрисовать

это нужно для того, чтобы в листах стилей выбранный радио был отправной точкой:

input:checked + тут все наши элементы, вид которых мы хотим менять

поскольку на родной радио нельзя применить стиль из дочерних элементов (например натянуть границы и т.д.), то вместо этого можно у дочернего стиля использовать псевдоэлемент :after и отрисовать нужные границы и закраски
кстати если надо перерисовать сам radio, то п.2) уже не нужен, мы просто

3.1) скрываем радио любым способом (например делаем невидимым)

3.2) рисуем круги и прочее имитирующие радио как описано в п.1)

.license input {
  position:       relative;
  top:            -15px;
  
  padding:        0px;
}
.license {
    width:        100%;    
    height:       50px;
}
.license .info {
    display:      inline-block;
    position:     relative;
    
    width:        calc(100% - 50px);    
    line-height:  calc(30px);
    
    padding:      10px;
}
.info .text {
    float:        left;
}
.info .values {
    float:        right;
}
input:checked + .info:after {
    content:      "";
    position:     absolute;
    z-index:      -1;
    left:         -50px;
    top:          0px;
    
    width:        calc(100% + 50px);
    height:       100%;
    
    display:      inline-block;
    box-sizing:   border-box;
    
    padding:      10px;
    
    border:       2px solid black;
    border-left:  none;
    background:   red;
}

<section style="margin-top: 5%;">
   <div class="license" id="onel">
       <input class="lic" name="chose" type="radio" value="one" id="one" checked="checked">
       <label class = 'info'>
           <div class = 'text'>LICENSE PLAN#1</div>
           <div class = 'values'>13</div>
       </label>
   </div> 
     
   <div class="license" id="onel">
       <input class="lic" name="chose" type="radio" value="one" id="one" checked="checked">
       <label class = 'info'>
           <div class = 'text'>LICENSE PLAN#2</div>
           <div class = 'values'>12</div>
       </label>
   </div> 
     
   <div class="license" id="onel">
       <input class="lic" name="chose" type="radio" value="one" id="one" checked="checked">
       <label class = 'info'>
           <div class = 'text'>LICENSE PLAN#3</div>
           <div class = 'values'>11</div>
       </label>
   </div> 
     
   <div class="license" id="onel">
       <input class="lic" name="chose" type="radio" value="one" id="one" checked="checked">
       <label class = 'info'>
           <div class = 'text'>LICENSE PLAN#4</div>
           <div class = 'values'>10</div>
       </label>
   </div> 
     
   <div class="license" id="onel">
       <input class="lic" name="chose" type="radio" value="one" id="one" checked="checked">
       <label class = 'info'>
           <div class = 'text'>LICENSE PLAN#5</div>
           <div class = 'values'>9</div>
       </label>
   </div> 
     
 </section>

Answer 2

$(".license input").click(function() {
  $(".license").removeClass("smth");
  console.log($(this).checked);
  if ($(this).checked != true) {
    $(this).closest('.license').addClass("smth");
  }
})

.smth {
  background: red;
}
.license{
  width:auto;
  height: auto;
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section style="margin-top: 5%;">


  <div class="license smth" id="onel">
    <div style="width: 50%; text-align: left; float: left;">
      <label>
        <input class="lic" name="chose" type="radio" value="one" id="one" checked>LICENSE PLAN#1
      </label>
    </div>
    <div style="width: 50%; text-align: right; float: left;"><label style="float: right">13</label> </div>
  </div>
  <div class="license" id="twol">
    <div style="width: 51%; text-align: left; float: left;"> <label><input class="lic" name="chose" type="radio" value="two" id="two">LICENSE PLAN#2</label></div>
    <div style="width: 49%; text-align: right; float: left;"><label style="float: right">22</label></div>
  </div>
  <div class="license" id="threel">
    <div style="width: 50%; text-align: left; float: left;"> <label><input class="lic" name="chose" type="radio" value="three" id="three">LICENSE PLAN#3</label></div>
    <div style="width: 50%; text-align: right; float: left;"><label style="float: right">34</label></div>
  </div>


</section>