Convert js Выбрать для радиокнопки?

Я пытаюсь преобразовать меню «Выбрать» с функцией обмена на радиокнопках. Но я не программист. Пример здесь имеет оба набора: «Выбрать», «Радио» - нет. I думаю это может быть проблема с обработкой «field_type».Convert js Выбрать для радиокнопки?

Ссылка на пример - http://originscards.com/pledge/strip.php

<script language="JavaScript" type="text/javascript"> 
var field_type = { check: 0, group: 1 }; // Control Type 
var c_iitem = { pledge: 0, pledge2: 1, pledge3: 2, pledge4: 3, shipping: 4 }; 

var s_aitem = [ 
{sz: 'pledge', ct: field_type.group, pledgeAmt: 12, qty: 0}, 
{sz: 'pledge2', ct: field_type.group, pledgeAmt: 17, qty: 0}, 
{sz: 'pledge3', ct: field_type.group, pledgeAmt: 29, qty: 0}, 
{sz: 'pledge4', ct: field_type.group, pledgeAmt: 41, qty: 0},  
{sz: 'shipping', ct: field_type.check, pledgeAmt: 0, qty: 0} 
]; 

function UpdateQty(iitem) 
{ 
var ctl = document.getElementById(s_aitem[iitem].sz); 
if (s_aitem[iitem].ct == field_type.check) 
{ s_aitem[iitem].qty = ctl.checked ? 1 : 0; } 
else if (s_aitem[iitem].ct == field_type.group) 
{ 
    if (iitem == c_iitem.pledge) 
     s_aitem[c_iitem.pledge].qty = s_aitem[c_iitem.pledge2].qty = s_aitem[c_iitem.pledge3].qty = s_aitem[c_iitem.pledge4].qty = 0;     

    i = parseInt(ctl.value, 4); 
    if (i >= 0) 
     s_aitem[iitem + i].qty = 1; 
} 
else // num 
{ s_aitem[iitem].qty = (ctl.value == '' || isNaN(ctl.value)) ? 0 : 
parseInt(ctl.value, 10); } 
} 

function NewVal(iitem) 
{ 
var i, pledgeAmt, shipping; 
UpdateQty(iitem); 
pledgeAmt = 0; 
for (i = s_aitem.length; --i >= 0;) 
    pledgeAmt += s_aitem[i].qty * s_aitem[i].pledgeAmt; 
if (s_aitem[c_iitem.shipping].qty == 0) 
    shipping = 0; 
else 
{ 
    shipping =  
    s_aitem[c_iitem.pledge].qty * 9 + 
    s_aitem[c_iitem.pledge2].qty * 9 + 
    s_aitem[c_iitem.pledge3].qty * 14 + 
    s_aitem[c_iitem.pledge4].qty * 14 ; 
} 

document.getElementById('pledgeAmt').innerHTML = pledgeAmt; 
document.getElementById('shipAmt').innerHTML = shipping; 
document.getElementById('total').innerHTML = pledgeAmt + shipping; 
} 

function UpdatePrices() 
{ 
UpdateQty(c_iitem.pledge); 
NewVal(c_iitem.shipping); 
} 

</script> 

</head> 
<body> 

<form name="form1"> 

<!-- SELECT WORKS -->  
<select size=1 name="pledge" id="pledge" onchange="NewVal(c_iitem.pledge);" 
onkeyup="NewVal(c_iitem.pledge);"> 
<option value="-1" selected> </option> 
<option value="0">pledgeA</option> 
<option value="1">pledgeB</option> 
<option value="2">pledgeC</option> 
<option value="3">pledgeD</option> 
</select> 

<!-- RADIO DOES NOT -->  
<input name="pledge" id="pledge" type="radio" value="-l" style="display:none" checked> 
<input name="pledge" id="pledge" type="radio" value="0" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);">Pledge A<br/>  
<input name="pledge" id="pledge" type="radio" value="1" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);">Pledge B<br/> 
<input name="pledge" id="pledge" type="radio" value="2" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);">Pledge C<br/> 
<input name="pledge" id="pledge" type="radio" value="3" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);">Pledge D<br/> 

<input id="shipping_us" type="radio" name="shipping" value="-1" checked onchange="NewVal(c_iitem.shipping);" onkeyup="NewVal(c_iitem.shipping);"> 
No Shipping<br/> 
<input id="shipping" type="radio" name="shipping" value="0" onchange="NewVal(c_iitem.shipping);" onkeyup="NewVal(c_iitem.shipping);"> 
Shipping 

Pledge $<span id="pledgeAmt">0</span> 
Shipping $<span id="shipAmt">0</span> 
Total $<span id="total">0</span> 
</form> 

<script language="JavaScript" type="text/javascript">UpdatePrices();</script>

источник

2013-11-18 Rick Davidson

StackOverflow не нужны деньги, чтобы помочь вам. Они все равно помогут вам, если они узнают ответ. ;) –

конвертировать как именно? – adeneo

Ha ok thanks Ahaan. Мне нужно, чтобы радиоприемник передавал значение функции NewVal так же, как это делает Select. На данный момент не происходит –

Я хотел бы начать с изменением поля ID, вы должны использовать раздельные имена, в настоящее время только byID поля вы получите с «залогом» является элементом селектора

<form name="form1"> 

<!-- SELECT WORKS -->  
<select size=1 name="pledge" id="pledge" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);"> 
<option value="-1" selected> </option> 
<option value="0">pledgeA</option> 
<option value="1">pledgeB</option> 
<option value="2">pledgeC</option> 
<option value="3">pledgeD</option> 
</select> 
<hr /> 
<!-- RADIO DOES NOT -->  
<input type="radio" name="pledge" id="pledge" value="-l" style="display:none" checked> 
<input name="pledge" id="pledge" type="radio" value="0" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);">Pledge A<br/> 
<input name="pledge" id="pledge2" type="radio" value="1" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);">Pledge B<br/> 
<input name="pledge" id="pledge3" type="radio" value="2" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);">Pledge C<br/> 
<input name="pledge" id="pledge" type="radio" value="3" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);">Pledge D<br/> 
<hr /> 
<input id="shipping_us" type="radio" name="shipping" value="-1" checked onchange="NewVal(c_iitem.shipping);" onkeyup="NewVal(c_iitem.shipping);">No Shipping<br/> 
<input id="shipping" type="radio" name="shipping" value="0" onchange="NewVal(c_iitem.shipping);" onkeyup="NewVal(c_iitem.shipping);">Shipping 
<hr /> 

Pledge $<span id="pledgeAmt">0</span> 
<hr /> 
Shipping $<span id="shipAmt">0</span> 
<hr /> 
Total $<span id="total">0</span> 
</form>

2 ваших радиокнопок использовать «залог», а также идентификатор

EDIT: Один из способов, чтобы выбрать объект, событие произошло на это выбрать на с lass, а затем использовать селектор jQuery $ (this)

источник

2013-11-18 21:01:25 Culyx

Ага, так что проблема в документе document.getElementById? Извините, как бы исправить это, чтобы использовать отдельные имена? –

Если вы делаете событие click, одна из вещей, которую вы можете сделать, это использовать $ (this), которая будет ссылаться на объект, который только что нажал, с необходимостью проверять по ID; Я отредактирую код в моем коде – Culyx

Только если вы используете jQuery. Знаки доллара в его примере на самом деле за денежные значения;) – Daved

Я бы на самом деле упростил его еще дальше. Если вы ничего не делаете с идентификаторами вне функций NewVal, вы можете удалить атрибут ID. Это необходимо для каждого элемента, если вы его используете. Однако, соблюдая стандартный синтаксис JavaScript, который вы используете, вы можете привязать событие ко всем элементам с именем «залог», перейдя через коллекцию объектов из getElementsByName и привязывая событие onChange. Тогда, в анонимной функции для него, ссылку на элемент или значение, в зависимости от ваших потребностей:

function NewVal(val) { 
    document.getElementById('example').value=val; 
} 
function NewValElement(ele){ 
    document.getElementById('example').value=ele.outerHTML; 
} 
var pledges = document.getElementsByName('pledge'); 
for (var i = 0;i<pledges.length;i++) { 
    // do something with value 
    /*pledges[i].onchange=function() { 
     NewVal(this.value); 
    };*/ 
    // do something with element 
    pledges[i].onchange=function() { 
     NewValElement(this); 
    }; 
}

Это позволит сделать его легче управлять событие, потому что вы не должны добавить OnChange к каждому. Вам не нужен ключ или что-либо либо потому, что onchange запускается, когда значение изменяется для опции выбора или группы радио.

Fiddle для рабочего примера: http://jsfiddle.net/9qfst/1/

вход показывает HTML элемента, чтобы показать вам, что он имеет элемент инициирующее событие.

Обновление Я развернул скрипку и немного почистил ее, чтобы сделать функциональность так, как я думаю, вы искали образец для работы. Я тоже посмотрел на ваш полный сайт и посмотрел, что вы пытаетесь сделать. Теперь я просто сохранил то, что у вас было, более или менее, и переписал фрагменты, чтобы очистить его и заставить его работать. Он все еще использует необработанный JavaScript, а не фреймворк. У меня также есть скрипт, который находится внизу элемента body, перед закрытием, поэтому у меня нет события onLoad или чего-то еще. Я также не называю UpdatePrices для этого примера, поскольку это выглядело так, как будто все было установлено на 0.

Теперь это можно было бы очистить еще больше, от того, что я вижу в том, что вы делаете, и есть альтернативные способы сделать это, а также способы использования jQuery для упрощения некоторых из них. Однако, похоже, это работает очень хорошо, из того, что я могу сказать. Единственное, чего я не делал, это добавить в AddOns, которые у вас есть на вашем сайте.

Проверьте это и дайте мне знать, если у вас есть вопросы: пользователи http://jsfiddle.net/92DJ6/2/

источник

2013-11-18 21:40:12 Daved

Я не знаю, как вы так быстро взбивали, но спасибо, это много значит. Через неделю расстройство разрешилось через 5 минут. Я проверю его в ближайшее время –

Дайте мне знать, если у вас есть вопросы по этому вопросу. Я могу помочь объяснить или завершить его, если вам нужно больше указателей или помощи. – Daved

Ugh. Я могу настроить ваш пример, но изо всех сил пытаюсь интегрироваться в свой проект, а не в свое мастерство. Я пытаюсь построить калькулятор для Kickstarter и быстро работать, заинтересованный в его заполнении? Я действительно мог использовать профессионала. Не думайте, что есть что делать, с удовольствием покроем ваше время. Вот прогр. До сих пор - http://originscards.com/pledge/. Это только верхняя колода (изображений), в которую я не могу входить. –

Convert js Выбрать для радиокнопки?

ответ

Смежные вопросы