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

Show and hide the text field in the same row for each checkbox

本文关键字：显示 复选框 隐藏 字段 文本 一行      更新时间：2024-01-09

在我的jsp中，我从数据库中创建了动态复选框。现在我想为每个复选框在同一行显示和隐藏文本字段。告诉我可能的方法。我尝试了一些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>

您可以更改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();
        }
 }

您需要唯一地标识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}"/>');"
相关文章：