Question

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

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

它正在为其他人的第一行工作，但它没有工作。

现在我需要，如果我按下验证控件按钮，需要在每一行中突出显示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')
            });
        });

请参阅以下小提琴：LIVE DEMO

Answer 1

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

此外，您的HTML是非法的 - col用于什么？

这是一个比每个

更优雅的解决方案

Live Demo

<table >
  <tbody id="mytable"></tbody>
</table>

使用

$("#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':"");
});

Answer 2

有几个问题：

每页的ID必须是唯一的，因此radiodiv和btnAdd都应该是类。
您需要从按下按钮的上下文中引用相应的radiodiv。

我在这里更新了小提琴：http://jsfiddle.net/6aBEf/9/

以下是更改：

$("#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')
    });
});

在jquery中验证动态单选按钮div

2 个答案: