Javascript 验证jquery中的动态radiobutton div

我使用单选按钮和按钮创建动态表行。如果单击添加控制按钮，该行将动态创建。单选按钮id为radiodiv

如果未选择单选按钮选项，我需要突出显示单选按钮的div

它正在为桌子的第一行工作，而其他行则不工作

现在我需要，如果我按下validate controls按钮，需要突出显示每行中radiobutton的div。如何做

 $("#inputId").click(function () {
            var table = $('table#mytable');
            var row = "<tr><td> <div id='radiodiv'> <input type='radio' name='sex' value='male'>Male<br><input type='radio' name='sex' value='female'>Female</td></div>*" +
                                    "<td> <input type='button' id='btnAdd'  value='ValidateControls' /> </td>";
            var col = $('<td style="width:100px;" align="left"></td>');
            $('#tableview').append(table.append(row));                

        });


        //radio button check or not
        $('#mytable').on('click', '#btnAdd', function () {
            $(this).parents('tr').find('input:radio').each(function () {
                if($("input:radio[name='sex']").is(":checked"))
                    $("#radiodiv").css('border', '')
                else
                    $("#radiodiv").css('border', '1px solid red')
            });
        });

$（“#inputId”）。单击（函数（）{
var table=$（'table#mytable'）；
var row=“男性
女性*”+
"  ";
var col=$（''）；
$（'#tableview'）.append（table.append（row））；
});
//单选按钮是否检查
$（'#mytable'）。在（'click'，'#btnAdd'，函数（）{
$（this）.parents（'tr'）.find（'input:radio'）.each（function（）{
如果（$（“输入：radio[name='sex']”）是（“：选中”））
$（“#radiodiv”）.css（'边框'，''）
其他的
$（“#radiodiv”）.css（'边框'，'1px实心红色'）
});
});

---

请参阅以下内容：

您需要将ID更改为名称或类-ID必须是唯一的

此外，您的html是非法的，

col

用于什么

这里有一个比每一个更优雅的解决方案

使用

$("#inputId").click(function () {
   var row = "<tr><td> <div class='radiodiv'> <input type='radio' name='sex' value='male'>Male<br><input type='radio' name='sex' value='female'>Female</div>*</td>" +
             "<td> <input type='button' class='btnAdd'  value='ValidateControls' /> </td></tr>";
   $('#mytable').append(row);                
});
//radio button check or not
$('#mytable').on('click', '.btnAdd', function () {
    var $div = $(this).closest("tr").find('.radiodiv');
    $check = $div.find("input:radio[name='sex']:checked").length;
    $div.css('border',$check==0?'1px solid red':"");
});

$（“#inputId”）。单击（函数（）{
var row=“男性
女性*”+
"  ";
$（'#mytable'）。追加（行）；
});
//单选按钮是否检查
$（'#mytable'）。在（'click'，'.btnAdd'，函数（）{
var$div=$（this.closest（“tr”）.find（'.radiodiv'）；
$check=$div.find（“输入：radio[name='sex']：checked”）。长度；
$div.css（'border'，$check==0？'1px实心红色'：“”）；
});

有几个问题：

每个页面的ID必须是唯一的，所以radiodiv和btnAdd都应该是类

您需要从按下按钮的上下文中引用相应的radiodiv

我在这里更新了小提琴：

以下是变化：

$("#inputId").click(function () {
    var table = $('table#mytable');
    var row = "<tr><td> <div class='radiodiv'> <input type='radio' name='sex' value='male'>Male<br><input type='radio' name='sex' value='female'>Female</td></div>*" +
                            "<td> <input type='button' class='btnAdd'  value='ValidateControls' /> </td>";
    var col = $('<td style="width:100px;" align="left"></td>');
    $('#tableview').append(table.append(row));                
});


//radio button check or not
$('#mytable').on('click', '.btnAdd', function () {
    $(this).parents('tr').find('input:radio').each(function () {
        if($("input:radio[name='sex']").is(":checked"))
            $(this).closest(".radiodiv").css('border', '')
        else
            $(this).closest(".radiodiv").css('border', '1px solid red')
    });
});

$（“#inputId”）。单击（函数（）{
var table=$（'table#mytable'）；
var row=“男性
女性*”+
"  ";
var col=$（''）；
$（'#tableview'）.append（table.append（row））；
});
//单选按钮是否检查
$（'#mytable'）。在（'click'，'.btnAdd'，函数（）{
$（this）.parents（'tr'）.find（'input:radio'）.each（function（）{
如果（$（“输入：radio[name='sex']”）是（“：选中”））
$（this）.closed（“.radiodiv”）.css（'border'，''）
其他的
$（this）.closest（“.radiodiv”）.css（'border'，'1px实心红色'）
});
});

name

属性用于分组，您需要在附加单选按钮时设置单独的名称。而

ID

s也必须是唯一的！您需要将ID更改为名称或类-ID必须是唯一的$（“#mytable”）。在（'click'，

'.btnAdd'

我会根据您的评论进行更新..仍然不起作用。如果我按任何validatecontrol按钮，它将影响表的第一行alone@User想看看我今天早些时候的更新吗？不是很优雅，你还没有解决非法的html

$("#inputId").click(function () {
    var table = $('table#mytable');
    var row = "<tr><td> <div class='radiodiv'> <input type='radio' name='sex' value='male'>Male<br><input type='radio' name='sex' value='female'>Female</td></div>*" +
                            "<td> <input type='button' class='btnAdd'  value='ValidateControls' /> </td>";
    var col = $('<td style="width:100px;" align="left"></td>');
    $('#tableview').append(table.append(row));                
});


//radio button check or not
$('#mytable').on('click', '.btnAdd', function () {
    $(this).parents('tr').find('input:radio').each(function () {
        if($("input:radio[name='sex']").is(":checked"))
            $(this).closest(".radiodiv").css('border', '')
        else
            $(this).closest(".radiodiv").css('border', '1px solid red')
    });
});