復選框僅影響表中的一行

Question

我正在嘗試，當我單擊復選框時，如果我取消選中“當前” ID的隱藏字段，則該字段變為可見；而當我單擊此復選框時，僅影響表的第一行，而其他行則不可見。不會影響何時選中或取消選中復選框。 以下是html代碼

<table class="table table-bordered">
 <tr>
    <td><strong> Name</strong></td>
    <td><strong>Email</strong></td>
    <td><strong>Phone</strong></td>
    <td><strong>Cnic</strong></td>
    <td><strong>Attendence</strong></td>
    <td><strong>Status</strong></td>
  </tr> 
 <?php foreach($user as $USER){?>
  <form method="post" action="">
 <tr>
    <td>
      <input  type="text" name="name" value="<?=$USER->name;?>" readonly>
      <input type="hidden" name="u_id" value="<?=$USER->u_id;?>">
    </td>
    <td>
      <input type="text" name="email" value="<?=$USER->email;?>" readonly>
    </td>
    <td>
      <input type="text" name="phone" value="<?=$USER->phone;?>" readonly>
    </td>
    <td>
      <input type="text" name="cnic" value="<?=$USER->cnic;?>" readonly>
    </td>
    <td style="text-align: center">
      <input type="checkbox"name="checkbox"id="checkbox" onclick="visibility()">
    </td>
    <td>
      <span style="visibility: hidden; color: green;"><input type="text" name="att" value="Present" id="present"></span>
      <span style="visibility: hidden; color: red;"><input type="text" name="att" value="Absent" id="absent"></span>
    </td>
  </tr>     
    <?php }?>  
 </form>
</table>

以下是JavaScript代碼

 <script type="text/javascript">
      function visibility() {
        if (document.getElementById("checkbox") . checked == true){
          document.getElementById("present").style.visibility ="visible";
          document.getElementById("absent").style.visibility = "hidden";
        }else{
          document.getElementById("absent").style.visibility = "visible";
          document.getElementById("present").style.visibility = "hidden";
        }     
      }
  </script>

Answer 1

我會這樣做

 <span style="visibility: hidden; color: green;"><input type="text" name="att" value="Present" class="present"></span>
      <span style="visibility: hidden; color: red;"><input type="text" name="att" value="Absent" class="absent"></span>


<script type="text/javascript">
      function visibility() {
        if (document.getElementsByClassName("checkbox") . checked == true){
          document.getElementsByClassName("present").style.visibility ="visible";
          document.getElementsByClassName("absent").style.visibility = "hidden";
        }else{
          document.getElementsByClassName("absent").style.visibility = "visible";
          document.getElementsByClassName("present").style.visibility = "hidden";
        }     
      }
  </script>

Answer 2

請嘗試以下方法：

• 呈現表單時，還將用戶ID作為參數發送給visibility方法。

   onclick="visibility(<?=$USER->u_id;?>)" 

• 通過將用戶ID附加到id屬性來設置不存在和當前字段的ID。

   <span style="visibility: hidden; color: green;"><input type="text" name="att" value="Present" id="present<?=$USER->u_id;?>"></span> <span style="visibility: hidden; color: red;"><input type="text" name="att" value="Absent" id="absent<?=$USER->u_id;?>"></span> 

• 同樣設置復選框的ID。

   <input type="checkbox"name="checkbox"id="checkbox<?=$USER->u_id;?>" onclick="visibility(<?=$USER->u_id;?>)"> 

• 使用作為參數發送給visibility方法的用戶ID來標識元素的ID。

   function visibility(id) { if (document.getElementById("checkbox"+id) . checked == true){ document.getElementById("present"+id).style.visibility ="visible"; document.getElementById("absent"+id).style.visibility = "hidden"; }else{ document.getElementById("absent"+id).style.visibility = "visible"; document.getElementById("present"+id).style.visibility = "hidden"; } } 

 <script type="text/javascript"> function visibility(id) { if (document.getElementById("checkbox"+id) . checked == true){ document.getElementById("present"+id).style.visibility ="visible"; document.getElementById("absent"+id).style.visibility = "hidden"; }else{ document.getElementById("absent"+id).style.visibility = "visible"; document.getElementById("present"+id).style.visibility = "hidden"; } } </script> 

 <table class="table table-bordered"> <tr> <td><strong> Name</strong></td> <td><strong>Email</strong></td> <td><strong>Phone</strong></td> <td><strong>Cnic</strong></td> <td><strong>Attendence</strong></td> <td><strong>Status</strong></td> </tr> <?php foreach($user as $USER){?> <form method="post" action=""> <tr> <td> <input type="text" name="name" value="<?=$USER->name;?>" readonly> <input type="hidden" name="u_id" value="<?=$USER->u_id;?>"> </td> <td> <input type="text" name="email" value="<?=$USER->email;?>" readonly> </td> <td> <input type="text" name="phone" value="<?=$USER->phone;?>" readonly> </td> <td> <input type="text" name="cnic" value="<?=$USER->cnic;?>" readonly> </td> <td style="text-align: center"> <input type="checkbox"name="checkbox"id="checkbox<?=$USER->u_id;?>" onclick="visibility(<?=$USER->u_id;?>)"> </td> <td> <span style="visibility: hidden; color: green;"><input type="text" name="att" value="Present" id="present<?=$USER->u_id;?>"></span> <span style="visibility: hidden; color: red;"><input type="text" name="att" value="Absent" id="absent<?=$USER->u_id;?>"></span> </td> </tr> <?php }?> </form> </table> 

Answer 3

id必須是唯一的。

在您的函數中僅添加參數，例如onclick =“ visibility（1）”-對於第一行並傳遞2插入的1，依此類推，也請對您的id id =“ present_1”和id =“ absent_1”執行此操作，依此類推， js功能如下

  function visibility(no) {
    if (document.getElementById("checkbox") . checked == true){
      document.getElementById("present_"+no).style.visibility ="visible";
      document.getElementById("absent_"+no).style.visibility = "hidden";
    }else{
      document.getElementById("absent_"+no).style.visibility = "visible";
      document.getElementById("present_"+no).style.visibility = "hidden";
    }     
  }

希望它的工作