複選框效果只有一個表

我試圖當我點擊複選框隱藏字段的「禮物」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/ –

複選框效果只有一個表

回答

相關問題