如何检查在单击提交按钮时选择了哪个动态创建的单选按钮
How to check which dynamically created radio button is selected on clicking submit button?
我知道这个问题以前被问过很多次,但我一直没能找到适合我具体情况的解决方案。
所以我有一个单选按钮,我最初是静态创建的。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');
}
});
我尝试了上面的代码,但它似乎只适用于第一个静态创建的单选按钮。我如何使这个相同的功能适用于所有静态和动态生成的单选按钮?
只要你的表单只处理一组单选按钮,你就可以这样做——只需将formId更改为你用于包装单选按钮的表单的任何class/id。
$('input[name=radioName]:checked', '#formId').val()
$('.submit-butt').on('click', function(){
var selectedRadioValue = $('input[name=radioName]:checked','#formId').val()
console.log(selectedRadioValue)
});
这就是你可以做到的。请参阅工作演示。
<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>
相关文章:
- d3基于用户选择动态更新节点
- JQuery--无法选择动态附加到表中的对象
- 如何根据用户选择动态更改多个复选框的编号
- JavaScript确认何时在表单中选择动态HTML字段
- 使用JQuery通过下拉选择动态更改PHP值
- 使用用户选择动态更新页面
- 在jquery中选择动态创建的元素
- 选择动态添加表单的元素
- 根据<选择>动态创建的表单不起作用
- j查询选择动态添加的表行的列数据
- Dojo 筛选选择 - 动态将下拉列表中的特定选项标记为禁用(灰显且不可选择)
- 选择动态创建的 html 元素而不单击
- 如何运行函数以选择动态添加
- Jquery 选择动态 ID
- 使用 Knockoutjs 根据用户的语言选择动态调整页面内容
- jQuery 选择动态创建的 html 元素
- 如何在JQuery中从Gallery View中选择动态图像
- 如何从AngularJS指令中选择动态生成的元素
- 选择动态创建的表中高亮显示的行,onclick事件
- 按类名选择动态更改的元素