遍历单选按钮组并显示错误
Posted
技术标签:
【中文标题】遍历单选按钮组并显示错误【英文标题】:iterate through radio button group and display error 【发布时间】:2013-10-23 04:17:47 【问题描述】:我的代码中使用了 4 个无线电组。其中 2 个是必需的无线电组。在提交表格时,我需要检查是否检查了所需的无线电组。如果未选中,我需要在下一个 div 中添加一条错误消息。但这对我不起作用。一些身体可以帮助我吗? 下面是一个广播组。所以我试图遍历单选按钮并检查它是否未选中,添加错误消息。但这似乎不起作用。两个单选按钮都会显示“请选择一个”文本。我只需要在第二个单选按钮下方的一个地方使用它。
$("input:radio").each(function()
$(this).next('div.error').remove();
var name = $(this).attr("name");
if($("input:radio[name="+name+"]:checked").length == 0)
$(this).after('<div class="error">Please select one</div>');
returnValue = false;
else
$(this).next('div.error').remove();
returnValue = true;
);
<input name="radio1" id="one" value="first" type="radio" class = "check"/>
<input name="radio1" id="two" value="second" type="radio" class="check"/>
【问题讨论】:
【参考方案1】:试试
var requiredgroups = ['name1', 'name2'], returnValue = true;
$.each(requiredgroups, function(id, name)
var $radios = $('input[name="' + name + '"]:radio');
$radios.last().next('div.error').remove();
if(!$radios.filter(':checked').length)
$radios.last().after('<div class="error">Please select one</div>');
returnValue = false;
)
演示:Fiddle
【讨论】:
您好 Arun,感谢您的回复。单选组中的单选按钮是垂直放置的。所以对我来说,错误信息放在两者之间。我希望将错误消息放在第二个单选按钮下方。我该怎么做? @user1049057 你将不得不编辑小提琴来复制你的案例【参考方案2】:您也可以尝试以下实现。 此实现使用组 div,您可以在其中添加数据验证属性。 然后,javascript 使用此数据验证属性来了解它必须验证哪些组。我认为这是一个更好的实现,因为它很容易在其他页面/网站/应用程序上重用。
HTML:
<div class="group" data-validation="required">
<label><input name="radio1" value="first" type="radio" class = "check"/> First</label><br />
<label><input name="radio1" value="second" type="radio" class = "check"/>Second</label></div>
JavaScript:
jQuery(document).ready(function($)
// Bind validate function
$('button').on('click', validate);
function validate()
$('.error').remove();
$.each($('.group[data-validation=required]'), function (idx, group)
var current = $(group).find('[type=radio]:checked').val()
if( current === undefined )
$(group).after('<div class="error">Please select one</div>');
);
);
Demo fiddle
【讨论】:
嗨 Wim..只是一个查询..你包含的 html 中的数据验证是什么?它是 jQuery 验证插件的一部分吗?目前在我的代码中,我没有使用 jquery validate 插件。而且在我所有的单选按钮中,我已经包含了 class="required" 。这会对 data-validation=required 造成任何问题吗?以上是关于遍历单选按钮组并显示错误的主要内容,如果未能解决你的问题,请参考以下文章