如何使用 foreach 循环在表中重复单选按钮

How to repeat radio button in a table using foreach loop

本文关键字：单选按钮 何使用 foreach 循环      更新时间：2023-09-26

我有一个表，在该表中有两个单选按钮，表数据从数据库中填充，我正在使用foreach循环，单选按钮连续重复，但是当我选择一个单选按钮时，另一个自动取消选择，

这是我想要完成任务的代码。

$(document).ready(function() {
        $(document).on('click', 'input[type=radio][name=test]', function() 
            { 
            var clicked = localStorage['clicked'];
           $('.' + related_class).prop('disabled', false); 
           $('input[type=radio][name=test]').not(':checked').each(function()
             { var other_class = $(this).val(); 
          $('.' + other_class).prop('disabled', true); 
        }); 
    });
 });   
 <table>    
<c:forEach items="${List2}" var="as">
            <tr>
                <td><input type="hidden" name="Id" value="${as.id}"/>${as.id}</td>  
                <td><input type="hidden" name="RuleName" value="${as.ruleName}"/>${as.ruleName}</td>
                <td>&nbsp;&nbsp;<input type="radio" name="fixed" value="Fixed"></td>
                <td>&nbsp;&nbsp; <input type="radio" name="repeats" VALUE="radio20"><select name="Repeats" style="width: 80px;" >
                        <c:forEach items="${listfrequency}" var="freq">  
                             <option value="${freq.frequencyName}"/>
                             <c:out value="${freq.frequencyName}" />
                            </c:forEach></select></td>
                <td>
            </tr>
</c:forEach>
</table>

这是因为所有无线电输入的名称都相同（repeats和fixed）。

您需要使它们对每一行都是唯一的，以便通过选择一个单选按钮，其他单选按钮不会自动取消选择。使它们唯一的最佳方法是将 foreach 循环的索引值附加到单选按钮的名称中。

我不知道如何在您的示例中获取 foreach 循环的索引/计数器值的语法。但它会如下。

<td>&nbsp;&nbsp;<input type="radio" name="fixed${indexValue}" value="Fixed"></td>
                <td>&nbsp;&nbsp; <input type="radio" name="repeats${indexValue}" VALUE="radio20"><select name="Repeats" style="width: 80px;" >
                        <c:forEach items="${listfrequency}" var="freq">  
                             <option value="${freq.frequencyName}"/>
                             <c:out value="${freq.frequencyName}" />
                            </c:forEach></select></td>

${indexValue} 将其替换为实际的索引/计数器变量。

相关文章：