[英]checkbox effect only one row in table
I am trying that when i click on checkbox hidden field of "present" id become visible if i uncheck the checkbox then hidden field of "absent" id become visible.But when i click on checkbox only first row of table is affected while other rows didn't affect when checkbox is checked or unchecked. 我正在尝试,当我单击复选框时,如果我取消选中“当前” ID的隐藏字段,则该字段变为可见;而当我单击此复选框时,仅影响表的第一行,而其他行则不可见。不会影响何时选中或取消选中复选框。 Following is the html code
以下是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>
And following is the JavaScript code 以下是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>
I would do this 我会这样做
<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>
Try the following method: 请尝试以下方法:
While rendering your form, also send user id as parameter to visibility
method. 呈现表单时,还将用户ID作为参数发送给
visibility
方法。
onclick="visibility(<?=$USER->u_id;?>)"
Set id of absent & present fields by appending user id to the id attribute. 通过将用户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>
Similarly set id of checkbox. 同样设置复选框的ID。
<input type="checkbox"name="checkbox"id="checkbox<?=$USER->u_id;?>" onclick="visibility(<?=$USER->u_id;?>)">
Use the user id sent as parameter to visibility
method to identify the id of element. 使用作为参数发送给
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>
id must be unique. id必须是唯一的。
add just parameter in your function eg onclick="visibility(1)" --for first row and pass 2 insted of 1 and so on also do this for your id id="present_1" and id="absent_1" and so on and the js function is as below 在您的函数中仅添加参数,例如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";
}
}
Hope its work 希望它的工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.