检查是否使用jquery选择了动态加载的单选按钮组

Question

我有一组单选按钮，如下所示。

<input type="radio" name="multi[1]" value="value-1">
<input type="radio" name="multi[1]" value="value-2">

<input type="radio" name="multi[2]" value="value-3">
<input type="radio" name="multi[2]" value="value-4">

<input type="radio" name="multi[3]" value="value-5">
<input type="radio" name="multi[3]" value="value-6">
<input type="radio" name="multi[3]" value="value-7">

<input type="radio" name="multi[n]" value="value-n">
<input type="radio" name="multi[n]" value="value-n">
<input type="radio" name="multi[n]" value="value-n">

如果这些组是动态加载的，那么我们如何检查是否选择了每个组中的选项？

更新：

num_group = 2;
for(i = 1; i <= num_group; i++){
   if(!$('input[name="multi['+i+']"]').is(':checked')){
         alert('Please select elective subjects '+i+'!');
         return false;
   }
}

如何动态计算num_group？这里

Answer 1

您必须检查document是否为ready，然后将change事件绑定到文档。

这会考虑到任何动态加载的元素(在这些元素上仍然会触发的change函数)。

$(document).ready(function(){
    $(document).on('change', 'input[type=radio]', function(){
        console.log($(this).val())
    });
});

Answer 2

这真的取决于你想要的验证类型。

如果您尝试在某个特定时间验证单选按钮，例如，当用户按下submit按钮时，您可以相当简单地遍历所有单选按钮，如下所示：

var max_radios = 1; // keep this updated as radio buttons are added
$('#validate').click(function() {
    for (i = 1; i <= max_radios; i++) {
        console.log('Radio ' + i + ' is ' + 
                    ($('[name="multi[' + i + ']"]:checked').val() == undefined ? 'unchecked' : 'checked') + '<br />');
    }
})

Link to jsFiddle

如果你想让验证在用户添加/点击单选按钮时实时进行，那就有点麻烦了。在这种情况下，一旦添加了一个新的单选按钮，您就希望显示一条验证消息，指示用户应该进行选择，一旦选择了一个值，验证消息就会消失。如果这是你想要的让我知道。