How to get the value of a selected radio button when the id for them is dynamically generated?

Question

My Html looks like below:

<div id="associatedAPListTable" style="float:left"><Associated (Destination)>
    <table border="0" cellspacing="0" cellpadding="0" class="listContainer" align="center" >
        <thead>
            <tr>
            <th class="tableheader" align="left" width="170">MAC address</th>
            <th class="tableheader" align="left" width="170">LradName</th>

            </tr>
        </thead>
        <tbody id="associated_tablebody">
        </tbody>
    </table>
    </div>

My javascript looks like below:

function getAssociatedList(){
var associatedAPListArray=[];
var xhrArgs = {
    url:"abc/sample/resource",
    preventCache: true,
    contentType: "application/json"
};
var deferred = dojo.xhrGet(xhrArgs);
deferred.addCallback(function(response){
    var associatedApListObj = dojo.fromJson(response);
    var firstJsonObject;
    var row = '';
    for (i=0; i <= dojo.fromJson(associatedApListObj.items).length-1; i++){
        firstJsonObject = dojo.fromJson(associatedApListObj.items)[i];
        var MacAddress = firstJsonObject.MacAddress;
        var LradName=firstJsonObject.LradName;
        var style_td='<td align="left" width="170">';
        row+='<tr>'+style_td+'<input type="radio"'+'id="associated_'+i+'" name="associatedAp"/ >'+MacAddress+'</td>'+style_td+LradName+'</td></tr>';
    }
    document.getElementById('associated_tablebody').innerHTML = row;
    });
}

So, now that I have created and displayed these radio buttons, I need to get the value of the radio button selected. Could someone please tell me how to do this is Javascript and not jQuery?

Answer 1

这将为您提供选中的单选按钮的id ：

document.querySelector('input[type=radio]:checked').getAttribute('id');

Answer 2

If you are looking to listen to user events, you need to add an event listener to the elements after creating them.

function handleChange(e) {
  // is it checked?
  console.log(this.checked)
  // what's the value?
  console.log(this.value)
}

var inputs = document.getElementById('associated_tablebody').querySelectorAll('input')

inputs.forEach(function(el) {
  el.addEventListener('change', handleChange)
})

---

Update

I thought you wanted to listen for events on each input. My bad.

If you're just looking to find the single radio button that's selected after you add the html to the page, just filter your result to the selected element and store (or log) it's value:

var inputs = document.getElementById('associated_tablebody').querySelectorAll('input')

var selected = [].slice.call(inputs).filter(function(el) {
  return el.checked
}).pop()

console.log(selected.value)

Fiddle: https://jsfiddle.net/jw7e0aL4/8/

Answer 3

First, I'm guessing you want the Mac Address of the selected radio button?

Based on your code it's unclear because you say

I need to get the value of the radio button selected

Yet, this input tag you are generating

<input type="radio"'+'id="associated_'+i+'" name="associatedAp"/ >

has no value set else it might look like this:

<input type="radio"'+'id="associated_'+i+'" name="associatedAp" value="'+MacAddress+'"/ >

To be clear the entire line of code would look like:

row+='<tr>'+style_td+'<input type="radio"'+'id="associated_'+i+'" name="associatedAp" value="'+MacAddress+'" />'+MacAddress+'</td>'+style_td+LradName+'</td></tr>';

Now you need to be able to select it and get the value:

var selection = document.querySelector('input:checked').value;