Показать сообщение отдельно
  #4 (permalink)  
Старый 08.07.2015, 11:52
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Зачем вам БД? Пример. Используя jQuery. По умолчанию в "price" отображается цена по выбранным по умолчанию кнопкам. При изменении в любой из групп цена обновляется в зависимости от выбора.
Переносите font-size: 16px и прочее в CSS. Картинки для кнопок тоже самое, используя не LI, а LABEL, и в псевдоселекторе label:before указать изобаржения. Если не критично, то родительским блокам DIV присвоить ID вместо классов, для использования их как селекторов.
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
$(function() {
    var m = $('#buscar').find('input').change(function() {
        $('#price').text(p.filter(':checked').data('price')+$(this).data('add'))
    });
    
    var p = $('#value_two').find('input').change(function() {
        $('#price').text($(this).data('price')+m.filter(':checked').data('add'))
    });
});
</script>     
</head> 

<body>
<div id="buscar">
    <label>
        <input data-add="5000" type="radio" checked="checked" name="one">
        <img src="car.png" alt="car" width="40px" height="40px">
    </label>
    <label>
        <input data-add="0" type="radio" name="one">
        <img src="bus.png" alt="bus" width="40px" height="40px">
    </label>
</div>

<div id="value_two">
    <label>
        <input data-price="10000" type="radio" checked="checked" name="two">
        3.5
    </label>
    <label>
        <input data-price="20000" type="radio" name="two">
        5.5
    </label>
    <label>
        <input data-price="30000" type="radio" name="two">
        9.5
    </label>
    <label>
        <input data-price="40000" type="radio" name="two">
        26
    </label>
</div>

<div id="price">15000</div>
</body> 
</html>


Изменяйте выбор, смотрите.
Ответить с цитированием