-1

我有一組動態生成的單選按鈕對列表中的每個數據，但我無法獲得選中的單選按鈕值。請幫忙！！如何獲取是否使用javascript檢查動態生成的單選按鈕？

function displayList() 
 
{ 
 
\t var arr=["Apple", "Banana", "Grapes"]; 
 
\t var list 
 
\t var output=""; 
 
\t var output2=""; 
 
\t var output3=""; 
 
\t var output4=""; 
 
\t for(var i=0; i<arr.length; i++) 
 
\t { 
 
\t \t list=arr[i]; 
 
\t 
 
\t \t output+= '<input type="checkbox" value='+list+' name="box2">' + ' ' + list+' '+'<br><br>'; 
 
\t \t 
 
\t \t 
 
\t \t output2+= 'yes:<input type="radio" value="yes" name="box2'+i+'">'+'no:<input type="radio" value="yes" name="box2'+i+'">'+'<br><br>'; 
 
\t \t output3+= '<button type="button" id="myBtn" onclick="displayCardList()" >Add Prompt</button>'+'<br><br>'; 
 
\t \t //onclick="myfunction()" 
 
\t \t output4+= '<button type="button" id="mySaveBtn" onclick="addEntity()" >Save </button>'+'<br><br>'; 
 
\t \t document.getElementById("List").innerHTML=output; 
 
\t \t document.getElementById("radioBtn").innerHTML=output2; 
 
\t \t document.getElementById("myBtn").innerHTML=output3; 
 
\t \t 
 
\t } 
 
}

<html> 
 
<body onload="displayList()"> 
 

 
\t \t \t \t <div class="row"> 
 
    <div class="col-sm-4"><div style="font-size:16px" id="List"> </div></div> 
 
    <div class="col-sm-4"><div style="font-size:16px" id="radioBtn"></div></div> 
 
    <div class="col-sm-4"><div id="myBtn"></div></div> 
 
    
 
</div> 
 
</body> 
 
</html>

來源

2017-04-10 Poppins

使用document.on功能 –

@SarathKumar：沒有'document.on'功能。 –

@ T.J.Crowder我的意思是$（document）.on（）;函數 –

但首先，讓我單獨的內容

我建議使用template標記的JavaScript從HTML代碼中分離，你應該總是做。

然後，您可以根據需要使用該模板插入儘可能多的項目。正如你在下面看到的那樣，使用純粹的JavaScript非常繁瑣。我建議使用把手。

var getRadioValue = function(name) { 
 
    var radios = document.getElementsByName(name); 
 

 
    for (var i = 0, length = radios.length; i < length; ++i) { 
 
     if (radios[i].checked) { 
 
     return radios[i].value 
 
     } 
 
    } 
 
    
 
    return null; 
 
}; 
 

 
var Actions = { 
 
    addPrompt: function(i) { 
 
    var value = getRadioValue('fruit-fresh-' + i); 
 
    if (value == "no") { 
 
     prompt('Why is ' + fruits[i] + ' not fresh? Explain:'); 
 
    } 
 
    else if (value == "yes") { 
 
     alert('We are glad that ' + fruits[i] + ' is fresh! Good job!'); 
 
    } 
 
    else { 
 
     alert('Please, check the corresponding value for ' + fruits[i] + ' freshness!'); 
 
    } 
 
    }, 
 
    save: function(i) { 
 
    alert('Saving: ' + fruits[i]); 
 
    }, 
 
    generateMarkupForFruit: function(i, fruitName) { 
 
    var template = document.querySelector('#fruits-template'); 
 
    var row = document.importNode(template.content, true); 
 

 
    var fruitId = 'fruit-' + i, 
 
     fruitField = row.querySelector('.fruit'), 
 
     fruitLabel = row.querySelector('.fruit-label'); 
 

 
    fruitField.value = fruitName; 
 
    fruitField.setAttribute('id', fruitId); 
 

 
    fruitLabel.textContent = fruitName; 
 
    fruitLabel.setAttribute('for', fruitId); 
 

 
    var yesId = 'fruit-yes-' + i, 
 
     noId = 'fruit-no-' + i, 
 
     groupId = 'fruit-fresh-' + i, 
 
     yesField = row.querySelector('.yes'), 
 
     yesLabel = row.querySelector('.yes-label'), 
 
     noField = row.querySelector('.no'), 
 
     noLabel = row.querySelector('.no-label'); 
 

 
    yesField.setAttribute('name', groupId); 
 
    yesField.setAttribute('id', yesId); 
 
    yesLabel.setAttribute('for', yesId); 
 
    noField.setAttribute('name', groupId); 
 
    noField.setAttribute('id', noId); 
 
    noLabel.setAttribute('for', noId); 
 

 
    var addPromptBtn = row.querySelector('.add-prompt-btn'), 
 
     saveBtn = row.querySelector('.save-btn'); 
 

 
    addPromptBtn.addEventListener('click', Actions.addPrompt.bind(null, i)); 
 
    saveBtn.addEventListener('click', Actions.save.bind(null, i)); 
 
    
 
    return row; 
 
    } 
 
}; 
 

 
var fruits = ["Apple", "Banana", "Grapes"]; 
 
var table = document.querySelector('#fruits'); 
 
for (var i = 0; i < fruits.length; ++i) 
 
{ 
 
    var row = Actions.generateMarkupForFruit(i, fruits[i]); 
 
    table.appendChild(row); 
 
}

#fruits { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
} 
 

 
#fruits td, 
 
#fruits th { 
 
    border: solid 1px; 
 
    padding: 0.25em; 
 
} 
 

 
#fruits th { 
 
    color: #fff; 
 
    background: #000; 
 
} 
 

 
#fruits .actions { 
 
    text-align: center; 
 
} 
 

 
#fruits .actions .save-btn { 
 
    font-weight: bold; 
 
}

<table id="fruits"> 
 
    <tr> 
 
    <th>Fruit</th> 
 
    <th>Is fruit fresh?</th> 
 
    <th>Actions</th> 
 
    </tr> 
 
</table> 
 

 
<template id="fruits-template"> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" class="fruit"> 
 
     <label class="fruit-label"></label> 
 
    </td> 
 
    <td> 
 
     <input type="radio" class="yes" value="yes"> 
 
     <label class="yes-label">Yes</label> 
 
     <input type="radio" class="no" value="no"> 
 
     <label class="no-label">No</label> 
 
    </td> 
 
    <td class="actions"> 
 
     <button type="button" class="add-prompt-btn">Add Prompt</button> 
 
     <button type="button" class="save-btn">Save</button> 
 
    </td> 
 
    </tr> 
 
</template>

來源

2017-04-10 16:04:30

如何獲取是否使用javascript檢查動態生成的單選按鈕？

回答

但首先，讓我單獨的內容

相關問題