Question

在我的jsp中，我从database创建了动态复选框。现在我想在每个复选框的同一行显示和隐藏文本字段。请告诉我可能的方法。我尝试了一些java脚本和jquery但是文本字段仅出现在第一个复选框中。

 function Checkbox(){
       if(document.getElementById('select').checked){
         document.getElementById('test').style.display='block'; 
            document.getElementById('test1').style.display='block'; 
    }else{
          document.getElementById('test').style.display='none';
          document.getElementById('test1').style.display='none';
        }
 }   
  <table>
        <c:if test="${empty PAStranslist || PASEditValue == null}">
            <c:if test="${!empty assetsList}">
        <c:forEach items="${assetsList}" var="assetsList" varStatus="loop">  
                       <tr>
                        <td width="18%" class="thlabel"><c:out value='${assetsList.asset}'/></td>
                         <%-- <c:if test="${assetsList.selectedCheckBox == 'true'}"> --%>
                        <td width="32%"><form:checkbox path="selectedCheckBox" name ="select" value="${assetsList.id}"  id="select"  onclick="Checkbox();"/></td>
                        <td  width="18%" class="thlabel" style="display: none" id="test">Asset Code</td>
                        <td  width="32%" style="display: none" id="test1" ><form:input path="assetCode"  maxlength="20"   onkeyup="check(this, '20');"></form:input>
                         <%-- </c:if>  --%>


                    </tr> 
                </c:forEach>

            </c:if>

            <c:if test="${empty assetsList}">
                <tr><td style="color: red">No physical assets to display</td></tr>
            </c:if>
        </c:if>
        </table>

Answer 1

您需要唯一标识forEach迭代器中的每一行数据，以便您可以分别引用每一行。

根据当前行索引分配唯一ID，例如：

<td  width="32%" style="display: none" id="test1_<c:out value='${loop.index}'/>" >

然后将javascript函数更改为：

function Checkbox(index){
       if(document.getElementById('select_'+index).checked){
         document.getElementById('test_'+index).style.display='block'; 
            document.getElementById('test1_'+index).style.display='block'; 
    }else{
          document.getElementById('test_'+index).style.display='none';
          document.getElementById('test1_'+index).style.display='none';
        }
 }

您对该功能的调用将变为：

onclick="Checkbox('<c:out value="${loop.index}"/>');"

Answer 2

您可以更改onclick功能以使用当前对象：

onclick="Checkbox(this);"

然后使用本机JavaScript，在JS函数中，您可以执行：

function Checkbox(obj){
   if(obj.checked){
     obj.parentNode.parentNode.getElementsByTagName('td')[2].style.display='block'; 
        obj.parentNode.parentNode.getElementsByTagName('input')[0].style.display='block'; 
}else{
      obj.parentNode.parentNode.getElementsByTagName('td')[2].style.display='none';
      obj.parentNode.parentNode.getElementsByTagName('input')[0].style.display='none';
    }

}

使用JQuery，您可以：

function Checkbox(obj){
       if(obj.checked){
         $(obj).closest('tr').find('#test').show(); 
            $(obj).closest('tr').find('#test1').show();
    }else{
          $(obj).closest('tr').find('#test').hide();
          $(obj).closest('tr').find('#test1').hide();
        }
 }

在每个复选框的同一行中显示和隐藏文本字段

2 个答案: