Question

我的代码中使用了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;
}

}）;

HTML

 <input name="radio1" id="one" value="first" type="radio" class = "check"/>
 <input name="radio1" id="two" value="second" type="radio" class="check"/>

Answer 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

Answer 2

您也可以尝试以下实施。此实现使用group 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

迭代单选按钮组并显示错误

2 个答案: