動態生成所選單選按鈕的ID時如何獲取它們的值？

Question

我的HTML如下所示：

<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>

我的JavaScript如下所示：

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;
    });
}

因此，既然我已經創建並顯示了這些單選按鈕，則需要獲取所選單選按鈕的值。 有人可以告訴我如何使用Javascript而不是jQuery嗎？

Answer 1

這將為您提供選中的單選按鈕的id ：

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

Answer 2

如果要監聽用戶事件，則需要在創建元素后向元素添加事件監聽器。

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)
})

---

更新資料

我以為您想聽每個輸入上的事件。 我的錯。

如果您只是想查找將html添加到頁面后選中的單個單選按鈕，則只需將結果過濾到所選元素並存儲（或記錄）它的值即可：

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

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

console.log(selected.value)

小提琴： https : //jsfiddle.net/jw7e0aL4/8/

Answer 3

首先，我猜您要選擇的單選按鈕的Mac地址嗎？

根據您的代碼尚不清楚，因為您說

我需要獲取選中的單選按鈕的值

但是，您正在生成此輸入標簽

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

沒有設置任何值，否則可能看起來像這樣：

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

為了清楚起見，整個代碼行如下所示：

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

現在，您需要能夠選擇它並獲取值：

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