1

Здравствуйте! Делаю сайт, заказ Суши и роллы и там есть опциональные товары (например Роллы), прежде чем добавить в корзину клиенту нужно выбрать кол-во, т.е 4 шт. или 8 шт. и соответственно стоимость товара должна меняться при выборе. Обычно это делается select' ом но select' ы не всегда смотрится красиво, поэтому сделал radio input' ом (+label) и не знаю как это сделать.

Вот так выглядеть сайт: введите сюда описание изображения и видео https://youtu.be/r_domj9Roqg

Вот HTML код

<div class="product-item">
    <div class="caption">
      <h5><a href="#">Ролл с лососем</a></h5>
      <div class="variations">
        <input type="radio" id="variat-1" name="Количества" value="4 шт." data-price="100" checked>
        <label for="variat-1">4 шт.</label>
        <input type="radio" id="variat-2" name="Количества" value="8 шт." data-price="189">
        <label for="variat-2">8 шт.</label>
      </div>
      <p class="price">100</p>
      <a href="#">В корзину</a>
    </div>
</div>

Как можно это реализовать? Вообще можно ли сделать с помощью radio?

Заранее благодарен!

2 ответа 2

1

Дописал скрипт (разметка та же):

$(document).on("change", ".variations input", function () {
  var $target = $(event.target)
  $target.closest(".caption").find(".price").text($target.data("price"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="product-item">
    <div class="caption">
      <h5><a href="#">Ролл с лососем</a></h5>
      <div class="variations">
        <input type="radio" id="variat-1" name="Количества" value="4 шт." data-price="100" checked>
        <label for="variat-1">4 шт.</label>
        <input type="radio" id="variat-2" name="Количества" value="8 шт." data-price="189">
        <label for="variat-2">8 шт.</label>
      </div>
      <p class="price">100</p>
      <a href="#">В корзину</a>
    </div>
</div>

1
  • Благодарю, очень помог! То что надо! 21 мая 2017 в 1:08
1

Обычно это делается так: располагаются radio и скрываются (через display:none). А, например внутри label располагается какой-либо тег, который оформляется кастомным образом.

Пример:

div {
  margin:0 0 0.75em 0;
}

input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    color: $DarkBrown;
    font-family:Arial, sans-serif;
    font-size:14px;
}
input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}

input[type="radio"] + label span {
     background-color:#292321;
}

input[type="radio"]:checked + label span{
     background-color:#CC3300;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}
<div>
  <input type="radio" id="radio01" name="radio" />
  <label for="radio01"><span></span>Radio Button 1</label>
</div>

<br/>

<div>
 <input type="radio" id="radio02" name="radio" />
 <label for="radio02"><span></span>Radio Button 2</label>
</div>

В данном случае идет оформление тега <span> внутри label.

Если закоментируете строки:

input[type="radio"] {
    display:none;
}

то увидите, что атрибут checked у кнопки благополучно проставляется

3
  • Мне кажется, или ты вообще не на тот вопрос отвечаешь? Я понял, что у него всё кроме изменения стоимости готово.
    – Qwertiy
    20 мая 2017 в 20:29
  • @Qwertiy может быть) 20 мая 2017 в 20:31
  • Спасибо, этот вариант тоже подходить! 21 мая 2017 в 1:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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