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

时间:2016-04-21 12:26:11

标签: javascript html jsp jstl

我有一个表,在那个表中有两个单选按钮,表数据从数据库填充,我使用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>

1 个答案:

答案 0 :(得分:0)

这是因为所有无线电输入的名称相同(repeatsfixed)。

您需要为每一行设置它们,以便通过选择一个单选按钮,不会自动取消选择。使它们唯一的最佳方法是将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}将其替换为您的实际索引/计数器变量。