Question

当我点击＆＃34; present＆＃34;的复选框隐藏字段时，我正在尝试如果我取消选中复选框，然后隐藏＆＃34;缺席＆＃34; 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;?>)"
```

设置缺席＆amp;的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";
  }     
}

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

Answer 3

id必须是唯一的。

在函数中添加just参数，例如 onclick =“visibility（1）” - 对于第一行并传递2个insted为1依此类推也为你的id id =“present_1”和id =“absent_1”依此类推，js函数如下所示< / p>

  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";
    }     
  }

希望它的工作

复选框仅影响表格中的一行

3 个答案: