如何检查单击提交按钮时选择了哪个动态创建的单选按钮？答案

【问题标题】：How to check which dynamically created radio button is selected on clicking submit button?如何检查单击提交按钮时选择了哪个动态创建的单选按钮？
【发布时间】：2016-09-15 03:02:18
【问题描述】：

我知道这个问题之前已经被问过很多次了，但我一直无法找到适合我的具体情况的解决方案。

所以我有一个单选按钮，我最初是静态创建的。 HTML代码如下

    <body>
        <div class = 'container'>
            <div class = 'row'>
                <div class = 'col-md-8 col-md-offset-2 well'>
                    <div class = 'col-md-4'>
                        <h1>Title Placeholder</h1>
                        <p>My vote goes to</p>

在下面的 div 中，我创建了第一个静态单选按钮

                        <div class = 'radio'>
                            <label>
                                <input type = 'radio' value = '1' name = 'options' class = 'radio-options'/>
                                <p id = 'radio1'>The value of 1</p>
                            </label>
                        </div>
                        <button type = 'submit' class = 'btn btn-primary submit-butt'>Submit</button>
                    </div>
                </div>
            </div>
        </div>   

    </body>

下面是我创建动态单选按钮的 javascript 文件部分

function createOptions(length, options){
    $('#radio1').html(options[0]);
    for (var i = 1; i < length; i++){
        $('.radio').append('<br>');
        $('.radio').append('<label><input type = radio value = 1 name = options class = radio-options/><p>'+options[i]+'</p></label>');
    }
    $('.radio').append('<br>');
    $('.radio').append('<label><input type = radio value = 1 name = options class = radio-options/><p>Custom</p></label>')
}

现在，当我单击提交按钮并选中其中一个单选按钮时，我希望能够知道选中了哪个单选按钮以及其输入标签中包含的 p 值

$('.submit-butt').on('click', function(){
                   if($('.radio-options').is(':checked')){
                       console.log('I have my value');
                   } 
                });

我尝试了上面的代码，但它似乎只适用于第一个静态创建的单选按钮。如何使相同的功能适用于静态和动态生成的所有单选按钮？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

只要您的表单只处理一组单选按钮，您就可以这样做，只需将 formId 更改为您用于包装收音机的表单的任何类/ID。

$('input[name=radioName]:checked', '#formId').val()

$('.submit-butt').on('click', function(){
   var selectedRadioValue = $('input[name=radioName]:checked','#formId').val()
   console.log(selectedRadioValue)
});

【讨论】：

【解决方案2】：

这就是你可以做到的。参考工作演示。

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>
#dynamicradio{
    margin-left: 100px;
}

#clickme{
    margin-left: 100px;
    margin-top:10px;
}

</style>

<body>

<div id="dynamicradio"></div>
<input type="button" value="submit" id="clickme">

</body>

<script type="text/javascript">
// here we create the dynamic radio button.
var create_dynamic_radio = $("<input type='radio' id='myradioo'> <label> My Radio Button</label>")
$("#dynamicradio").append(create_dynamic_radio);

// here we write the code for click function.
$("#clickme").click(function(){
    var isradiochecked = $("#myradioo").prop('checked');//check whether the dynamic radio button is checked or not.
    if(isradiochecked == true)
    {
        alert("dynamic radio button is checked");
    }
    else
    {
        alert("dynamic radio button isn't checked");
    }
});

</script>

</html>

【讨论】：

“试试这个”对任何人都没有帮助。发生了什么变化？为什么会起作用？
@AnuradhS 是否需要通过变量来创建动态单选按钮？另外，是否有必要将新的动态单选按钮创建为单独的 div 标签的一部分？
这不是必须的，如果你想你可以不带变量创建它。