0

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

 <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 выделялась целиком вся строка? Если при текущей верстки сделать такое нельзя, то предложите иной вариант с решением) Буду очень признательна, весь интернет уже облазила(

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

1
  • Глядя на картинку, существует подозрение, что кликабельна вся строка, а не только кружок radio. Это так? Или всё таки нужно именно курсором в кнопку попасть, а строка чисто визуалка?
    – UModeL
    Commented 2 нояб. 2020 в 11:46

2 ответа 2

2

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

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

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

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

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

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

  2. кстати если надо перерисовать сам 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>

5
  • Вы немного не так меня поняли, пример того, что должно получиться добавил к вопросу Commented 2 нояб. 2020 в 11:33
  • Так это и не фриланс, а попытка самой сделать для себя сайт, как картотека того, что получилось Commented 2 нояб. 2020 в 11:38
  • @MaximLensky, так это и не является окончательным решением Commented 2 нояб. 2020 в 11:47
  • @Алина Сотская, а так? посмотрите, я в ответе исправил код
    – Zhihar
    Commented 2 нояб. 2020 в 11:51
  • @MaximLensky, так это уже другая задача, но делается ровно также - все отталкивается от основного радио, просто основной делается невидимым
    – Zhihar
    Commented 2 нояб. 2020 в 11:52
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>

1
  • Вместо $().checked лучше использовать $().prop('checked')
    – De.Minov
    Commented 2 нояб. 2020 в 12:22

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.