复选框效果只有一个表

我试图当我点击复选框隐藏字段的“礼物”ID变得可见如果我取消选中该复选框，然后隐藏字段的“缺席”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>

来源

2017-10-10 sameed ul hassan

使用类选择元素要检查的，而不是ID即document.getElementsByClassName（‘复选框’），你应该罚款 –

'id'属性应该是唯一的以区分复选框 –

通过使用类名称，不会影响 –

请尝试以下方法：

虽然呈现你的表格也是nd用户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;?>)">

使用发送作为参数的用户ID visibility方法来识别元素的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>

来源

2017-10-10 11:01:12

@sameedulhassan更新了答案...现在检查 –

先生我现在使用此代码每个复选框的工作，但仍然存在问题，如果第一行复选框被选中状态成为存在和所有其他行复选框显示当前状态，即使复选框未被选中状态仍然存在。其他复选框的结果取决于第一行的复选框，如果第一行的复选框被选中，则所有其他复选框显示当前状态（如果未选中）所有其他复选框显示缺席状态 –

感谢您的帮助，现在代码正在工作。其实我并没有在复选框ID后加上u_id，这就是为什么我面临错误。再次感谢您的帮助先生 –

我会做这个

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

来源

2017-10-10 10:57:30

先生通过使用这种方法如果一个复选框被选中，所有行的状态将会受到影响。我希望只有一行影响通过检查其相应的复选框 –

ID必须是唯一的。

只在你的函数中添加参数，例如 onclick =“visibility（1）” - 用于第一行并传递2 insted为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"; 
    }  
    }

希望其工作

来源

2017-10-10 11:10:27

https://jsfiddle.net/qt9xyc36/5/ –

复选框效果只有一个表

回答

相关问题