如何检查单击提交按钮时选择了哪个动态创建的单选按钮？
[英]How to check which dynamically created radio button is selected on clicking submit button?
问题描述
I know this question has been asked plenty of times before, but I haven't been able to find a solution that works for my specific case.
我知道这个问题之前已经被问过很多次了，但是我一直无法找到适合我的具体情况的解决方案。
So I have a radio button which I create statically initially.
<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>
In the below div is where I create the first static radio button
<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>
Below is the section of the javascript file where I create dynamic radio buttons
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>')
}
Now, when I click the submit button, with one of the radio buttons checked, I want to be able to know which of the radio buttons is checked and also the p value contained within its input tags
$('.submit-butt').on('click', function(){
if($('.radio-options').is(':checked')){
console.log('I have my value');
}
});
I tried the above code, but it only seems to work for the first statically created radio button.
2 个解决方案
解决方案1
1 2016-09-14 18:44:08
as long as your form is only deal with one set of radio buttons you can do it this way just change formId to whatever class/id you are using for the form wrapping the radios.只要您的表单只处理一组单选按钮，您就可以这样做，只需将 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
0 2016-09-14 18:51:02
this is how you can do it.这就是你可以做到的。 refer the working demo.参考工作演示。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.