Как прикрутить onchange к radio?
Есть вот такой вот скрипт:
<script type="text/javascript"> function ChangePrice(option_id, priceplus) { priceplus = priceplus.split(":"); old_id = priceplus[0]; priceplus = priceplus[1]; price = document.getElementById("hprice").value; old_val = document.getElementById("oldg"+option_id).value; document.getElementById("oldg"+option_id).value = priceplus; delta = parseFloat(priceplus)-parseFloat(old_val); price = parseFloat(price)+delta; document.getElementById("vprice").innerHTML = price; document.getElementById("hprice").value = price; document.getElementById('hidid['+option_id+']').value = old_id; } function checkboxsum(vlu) { price = document.getElementById("hprice").value; priceplus = vlu.id; if(vlu.checked) price = parseFloat(price)+parseFloat(priceplus); else price = parseFloat(price)-parseFloat(priceplus); document.getElementById("vprice").innerHTML = price; document.getElementById("hprice").value = price; } </script> |
<script type="text/javascript"> function ChangePrice(option_id, priceplus) { priceplus = priceplus.split(":"); old_id = priceplus[0]; priceplus = priceplus[1]; price = document.getElementById("hprice").value; old_val = document.getElementById("oldg"+option_id).value; document.getElementById("oldg"+option_id).value = priceplus; delta = parseFloat(priceplus)-parseFloat(old_val); price = parseFloat(price)+delta; document.getElementById("vprice").innerHTML = price; document.getElementById("hprice").value = price; document.getElementById('hidid['+option_id+']').value = old_id; } function checkboxsum(vlu) { price = document.getElementById("hprice").value; priceplus = vlu.id; if(vlu.checked) price = parseFloat(price)+parseFloat(priceplus); else price = parseFloat(price)-parseFloat(priceplus); document.getElementById("vprice").innerHTML = price; document.getElementById("hprice").value = price; } </script>
Предназначен для динамического изменения цены в интернет-магазине, при выборе посетителем аттрибута товара, у которого есть наценка. Скрипт уже работает с аттрибутами, имеющими тип select. А вот как научить его работать с аттрибутами типа radio?
Код для select выглядит вот так:
<!-- select --> <table class="calc" border="0" cellspacing="0" cellpadding="5" bgcolor="#f3d6b1"> <tr class="{cycle values="calc1,calc2"}"> <td width="220px"> <p><strong>{$options_data.NAME}:</strong></p> </td> <td> <p> <select id="hidid[{$options_data.ID}]" name="id[{$options_data.ID}]" style="display:none;"> {foreach key=key_data item=item_data from=$options_data.DATA} <option value="{$item_data.ID}">{$item_data.TEXT} {if $item_data.MODEL}({$item_data.MODEL}){/if} {if $item_data.PRICE_PLAIN != 0}({$item_data.PREFIX}{$item_data.PRICE}){/if}</option> {/foreach} </select> <select name="idvis[{$options_data.ID}]" onchange="Javascript:ChangePrice({$options_data.ID},this.value);"> {foreach key=key_data item=item_data from=$options_data.DATA} {if $item_data.PREFIX == '-'} <option value="{$item_data.ID}:{$item_data.PRICE_PLAIN}">{$item_data.TEXT} {if $item_data.MODEL}({$item_data.MODEL}){/if} {if $item_data.PRICE_PLAIN != 0}({$item_data.PRICE}){/if}</option> {else} <option value="{$item_data.ID}:{$item_data.PREFIX}{$item_data.PRICE_PLAIN}">{$item_data.TEXT} {if $item_data.MODEL}({$item_data.MODEL}){/if} {if $item_data.PRICE_PLAIN != 0}({$item_data.PREFIX}{$item_data.PRICE}){/if}</option> {/if} {/foreach} </select> <input type="hidden" name="oldg{$options_data.ID}" id="oldg{$options_data.ID}" value="0" /> </p> </td> </tr> </table> <!-- /select --> |
<!-- select --> <table class="calc" border="0" cellspacing="0" cellpadding="5" bgcolor="#f3d6b1"> <tr class="{cycle values="calc1,calc2"}"> <td width="220px"> <p><strong>{$options_data.NAME}:</strong></p> </td> <td> <p> <select id="hidid[{$options_data.ID}]" name="id[{$options_data.ID}]" style="display:none;"> {foreach key=key_data item=item_data from=$options_data.DATA} <option value="{$item_data.ID}">{$item_data.TEXT} {if $item_data.MODEL}({$item_data.MODEL}){/if} {if $item_data.PRICE_PLAIN != 0}({$item_data.PREFIX}{$item_data.PRICE}){/if}</option> {/foreach} </select> <select name="idvis[{$options_data.ID}]" onchange="Javascript:ChangePrice({$options_data.ID},this.value);"> {foreach key=key_data item=item_data from=$options_data.DATA} {if $item_data.PREFIX == '-'} <option value="{$item_data.ID}:{$item_data.PRICE_PLAIN}">{$item_data.TEXT} {if $item_data.MODEL}({$item_data.MODEL}){/if} {if $item_data.PRICE_PLAIN != 0}({$item_data.PRICE}){/if}</option> {else} <option value="{$item_data.ID}:{$item_data.PREFIX}{$item_data.PRICE_PLAIN}">{$item_data.TEXT} {if $item_data.MODEL}({$item_data.MODEL}){/if} {if $item_data.PRICE_PLAIN != 0}({$item_data.PREFIX}{$item_data.PRICE}){/if}</option> {/if} {/foreach} </select> <input type="hidden" name="oldg{$options_data.ID}" id="oldg{$options_data.ID}" value="0" /> </p> </td> </tr> </table> <!-- /select -->
Дополнительно:
Ну если добавить еще один селект, то ничего работать не будет.
ни одной радиокноки в коде нет
https://developer.mozilla.org/ru/docs/Web/HTML/Ele...
<!-- radio --> <p> <strong>{$options_data.NAME}:</strong> {foreach key=key_data item=item_data from=$options_data.DATA} <!-- changed by mosq // --> <input type="radio" name="id[{$options_data.ID}]" value="{$item_data.ID}" {$item_data.CHECKED} /> {$item_data.TEXT} {if $item_data.PRICE_PLAIN != 0}({$item_data.PREFIX}{$item_data.PRICE}){/if} {if $item_data.DESCRIPTION}<br />{$item_data.DESCRIPTION}<br />{/if} {if $item_data.SHORT_DESCRIPTION}{$item_data.SHORT_DESCRIPTION}<br />{/if} {if $item_data.IMAGE}<img src="{$image_dir}thumbs/{$item_data.IMAGE}" border="0" alt="{$item_data.TEXT}" />{/if} {if $item_data.LINK}<a align="right" href="http://{$item_data.LINK}" target="_blank"><img src="{$tpl_path}img/info.gif" border="0" alt="{$item_data.TEXT}" /></a>{/if}<br /> {/foreach} </p> <!-- /radio --> |
<!-- radio --> <p> <strong>{$options_data.NAME}:</strong> {foreach key=key_data item=item_data from=$options_data.DATA} <!-- changed by mosq // --> <input type="radio" name="id[{$options_data.ID}]" value="{$item_data.ID}" {$item_data.CHECKED} /> {$item_data.TEXT} {if $item_data.PRICE_PLAIN != 0}({$item_data.PREFIX}{$item_data.PRICE}){/if} {if $item_data.DESCRIPTION}<br />{$item_data.DESCRIPTION}<br />{/if} {if $item_data.SHORT_DESCRIPTION}{$item_data.SHORT_DESCRIPTION}<br />{/if} {if $item_data.IMAGE}<img src="{$image_dir}thumbs/{$item_data.IMAGE}" border="0" alt="{$item_data.TEXT}" />{/if} {if $item_data.LINK}<a align="right" href="http://{$item_data.LINK}" target="_blank"><img src="{$tpl_path}img/info.gif" border="0" alt="{$item_data.TEXT}" /></a>{/if}<br /> {/foreach} </p> <!-- /radio -->
И вот его нужно изменить так, чтобы он работал подобно коду select
не очень понимаю в чем проблема.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы прикрутить событие onchange к радио кнопкам, вам необходимо использовать JavaScript. Событие onchange срабатывает, когда значение элемента было изменено.
Пример кода на JavaScript, который добавляет событие onchange к радио кнопкам:
document.addEventListener('DOMContentLoaded', function() { var radios = document.querySelectorAll('input[type="radio"]'); radios.forEach(function(radio) { radio.addEventListener('change', function() { // Ваш код, который будет выполнен при изменении значения радио кнопки }); }); });
В этом примере мы используем метод document.querySelectorAll() для выбора всех радио кнопок на странице. Затем мы добавляем событие onchange к каждой радио кнопке с помощью метода addEventListener(). Внутри обработчика события onchange вы можете добавить любой код, который должен быть выполнен при изменении значения радио кнопки.
Не забудьте поместить этот скрипт внутри тега в вашем HTML документе, чтобы он корректно работал.