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

我知道这个问题已被问过很多次，但我一直没能找到适合我的具体情况的解决方案。如何检查点击提交按钮时选择了哪个动态创建的单选按钮？

所以我有一个单选按钮，我最初创建静态。下面

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

的HTML代码中给出了下面的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'); 
        } 
       });

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

来源

2016-09-14 random_coder_101

只要您的表单只处理一组单选按钮，您可以这样做，只需将formId更改为包装无线电的表单所使用的任何类/标识。

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

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

来源

2016-09-14 18:44:08 finalfreq

这是你可以怎么做。参考工作演示。

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

来源

2016-09-14 18:51:02

“试试这个” 是任何人都没有帮助。什么改变了？它为什么有效？ –

好吧，先生@SterlingArcher，改变了它。 –

@AuradhS是否需要通过变量创建动态单选按钮？另外，是否需要创建新的动态单选按钮作为单独的div标签的一部分？ –

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

回答

相关问题