HTML Как передать две переменные на кнопку радиоприемника?

Question

Как передать две переменные при нажатии кнопки? Это может показаться основным, но я полностью застрял!

Я создаю таблицу с радиокнопкой с левой стороны, а когда вы ее нажимаете, я хочу получить два значения. В настоящее время я извлекаю одно значение, но мне не хватает другого.

В настоящее время я прохожу одно значение на моей onRadioButtonPress функции, как это:

html += "<tr><td><center><br> 
      <input type='radio' 
      onclick='onRadioButtonPress(this.value)' 
      name='siteChosen' 
      value='"+siteIDArray[i]+"'> 
      <center></td>"; 

И я вызываю функцию так:

//function for on radio button press 
    function onRadioButtonPress(val){ 

     //blah blah blah 
} 

Который работает замечательно, но как я могу добавить второе значение

usagePlanArray [I]

к моему on onClick функция? Как я могу изменить свой вклад?

Заранее спасибо! :) Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы, или если я пропустил что-то, что поможет вам!

---

РЕШЕННЫЙ!

См. Заметный ответ от @mplungjan. Я использовал его альтернативный метод, который полезен для jQuery.

Answer 1

value='"+siteIDArray[i]+"|"+usagePlanArray[i]+"'> 

но вам нужно удалить символ новой строки из HTML тоже

Тогда в функции вы можете использовать

var vals=val.split("|"); 
var siteID=vals[0], usagePlan=vars[1]; 

Альтернатива - особенно полезно в Jquery:

html += "<tr><td><center><br><input type='radio'"+ 
     " onclick='onRadioButtonPress(this)' name='siteChosen'"+ 
     " data-siteid='"+siteIDArray[i]+"'"+ 
     " data-usageplan='"+usagePlanArray[i]+"'><center></td>"; 

и

function onRadioButtonPress(rad) { 
    var siteID=rad.getAttribute("data-siteid"), 
     usageplan=rad.getAttribute("data-usageplan"), 
} 

Answer 2

Передайте массив в JSON:

value='"+JSON.stringify(siteIDArray)+"'> 

Это было бы передать весь массив как массив строк JSON.

Переходя к отдельным значениям:

value='["+siteIDArray[i] + "," + usagePlanArray[i] + "]'> 

или, как объект:

value='{ \"val1\":\""+siteIDArray[i] + "\",\"val2\":\"" + usagePlanArray[i] + "\"]'> 

Теперь дешифровать в функции

values = JSON.parse(val); 
    ... 
    xyz = values[0]; // for the array 
    ... 
    xyz = values.val1; // for the object 

код может даже быть оптимизированы, если вы направляете передайте это в onclick вместо параметра value, но это может иметь некоторые дополнительные цели.

Answer 3

Если вы используете один и тот же индекс для обоих массивов, почему бы просто не сохранить индекс в качестве значения и не найти нужные значения в обратном вызове?

var html= ""; 

var siteIDArray = [1, 5, 2, 33]; 
var usagePlanArray = ["unlimited", "20gb", "10gb", "5gb" ] 

function arrayCombo(index){ 
    return {siteId: siteIDArray[index], usagePlan: usagePlanArray[index]}; 
} 

for(var i=0; i<siteIDArray.length; i++){ 
    html += "<tr><td><center><br><input type='radio' name='siteChosen' value="+i+"><center></td>"; 
} 

$('#content').html(html); 

$('input').on('click', function(event){ 
    //Do whatever you want with the values you are looking for here 
    var x = arrayCombo(this.value); 
    alert(x.siteId+", "+x.usagePlan); 
}); 

Кроме того, чтобы продемонстрировать это дружные отношения между массивами вероятно, было бы лучше хранить свои ценности в общих индексах, как свойства объектов в массиве.