Добрый день. Собственно, вопрос в теме.
Имеется к примеру вот такая страница:
http://santeh-ceramica.ru/kategorii/smesiteli/migliore-arcadia-ml-arc-8302-dlya-vanny-detail.htmlНеобходимо, чтобы при выборе цвета, в блоке отображался текст radio-кнопки
К примеру - по умолчанию стоит первый цвет - Chrome.
В блоке надпись:
Выбран цвет: Chrome
Кликаешь по другому -
Выбран цвет: Бронза
Выбран цвет: Золото
и т.д.
Нашел такое решение :
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
$('input:radio').click(function (){
var val=$(this.parentNode).text();
var id=$(this).parents('table').attr('id');
id='result_'+id
$('#'+id).text(val);
});
});
</script>
</head>
<body>
<table id="radio_param" >
<tr>
<td>
<label><input id="radio_param_0" type="radio" name="group_param" value="0">Название Param0</label>
</td>
</tr>
<tr>
<td>
<label><input id="radio_param_1" type="radio" name="group_param" value="1">Название Param1</label>
</td>
</tr>
</table>
<table id="radio_taram" >
<tr>
<td>
<label><input id="radio_taram_0" type="radio" name="group_taram" value="0">Название Taram0</label>
</td>
</tr>
<tr>
<td>
<label><input id="radio_taram_1" type="radio" name="group_taram" value="1">Название Taram1</label>
</td>
</tr>
</table>
<div class='result'>
<p id='result_radio_param'></p>
<p id='result_radio_taram'></p>
</div>
</body>
</html>
Не могу разобраться как его адаптировать под мои radio-box из customfields.
<style>
.product-fields .other-customfield img {max-width:45px}
.product-fields .product-field input[type="radio"]{display:none}
.product-fields .product-field label.other-customfield {width:90px;float:left}
.product-fields .product-field label.other-customfield {width:90px;float:left}
.product-fields .other-customfield .vm-img-desc {font-size: 12px; display: block;}
.on { color: red;font-weight:bold}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.other-customfield :radio:checked').each(function (){
jQuery(this).parent().addClass('on');
});
jQuery('.product-field-display label').click(function (){
jQuery('.product-field-display label').removeClass('on'),
jQuery(this).addClass('on');
});
});
</script>
<?
if (!empty($this->product->customfieldsCart)) { ?>
<div style="padding:10px;background:#eaeaea;border:2px solid #cdcdcd;bor…rgin-top:-3px;color:#404040;font-size:12px;font-family:Arial;float:left">
123
</div>
<div style="position:absolute;width:447px;margin-top:320px;width:447px;margin-left:-300px;float:left;color:#404040">
<h3 style="font-size:120%;margin-left:-20px">Выберите цвет:</h3>
<div class="product-fields" id="righthere">
<?php foreach ($this->product->customfieldsCart as $field) { ?>
<div class="product-field product-field-type-<?php echo $field->field_type ?>">
<span class="product-field-display"><?php echo $field->display ?></span>
</div></div>
<?php }} ?>
</form>
</div>
<div class="clear"></div>
07.04.2024, 11:19:12