如何隱藏內容表格單元格

Question

我有一個帶有表格的表單，當用戶單擊單選按鈕 No 時，該行中以下單元格的內容應該可見。 單擊是時，內容應再次隱藏。 現在沒有區別。 它在桌子外面工作。

我在 div-tag 和 td-tag 中嘗試了 style="display:table-cell" - 沒有成功。

用戶表單的圖片

DevTools 中的錯誤消息是：TypeError: Cannot read properties of null (reading 'checked') at yesnoCheck

DevTools 中的錯誤信息圖片

 function yesnoCheck(var1, var2) { if (document.getElementById(var1).checked) { document.getElementById(var2).style.display = 'none'; } else document.getElementById(var2).style.display = 'block'; }

 th { background-color: #dddddd }

 <h1>Hide input fields based on radio button selection</h1> <h3>Frame</h3> Propellers OK?<br /> <input type="radio" name="yesno" id="noCheck" onclick="javascript:yesnoCheck('noCheck', 'ifNo');">Yes <input type="radio" name="yesno" id="noCheck" onclick="javascript:yesnoCheck('noCheck', 'ifNo');">No<br> <div id="ifNo" style="display:none"> <input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" /> </div> <br /> Frame arms OK?<br /> <input type="radio" name="framearms" onclick="javascript:yesnoCheck('framearms', 'framearmsDiv');" id="framearms" />Yes <input type="radio" name="framearms" onclick="javascript:yesnoCheck('framearms', 'framearmsDiv');" id="framearms" />No <div id="framearmsDiv" style="display:none"> <input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" /> </div> <br /><br /> <form> <table style="width:100%"> <tr> <th>What to do</th> <th>OK</th> <th>Replaced</th> <th>Date</th> <th>Checked by</th> </tr> <tr> <td>The propellers, motors, and aircraft body are intact, and there is no sign for collision or loose or broken structures.</td> <td><input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="Yes" onclick="javascript:yesnoCheck(aftercheckbodyR, aftercheckbodyDiv);" />Yes <input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="No" onclick="javascript:yesnoCheck(aftercheckbodyR, aftercheckbodyDiv);" />No </td> <div id="aftercheckbodyDiv" style="display:table-cell"> <td><input type="checkbox" id="aftercheckbodyC" value="Yes" /></td> </div> <td><input type="date" id="aftercheckbodyD" /></td> <td><input type="text" id="aftercheckbodyT" /></td> </tr> <tr> <td>The temperature of the motors is normal and there are no signs of uneven heating.</td> <td> <input type="radio" name="afterchecktempR" value="Yes" />Yes <input type="radio" name="afterchecktempR" value="No" />No </td> <td><input type="checkbox" id="afterchecktempC" value="Yes" /></td> <td><input type="date" id="afterchecktempD" /></td> <td><input type="text" id="afterchecktempT" /></td> </tr> </table> </form>

Answer 1

你需要

1. 有效的 HTML - 單元格之間有 div

2. 唯一 ID。

3. 一致地使用名稱、標簽、值等。

4. 無需在所有內容前加上javascript:

我強烈建議您將每個集合包裝在一個容器中，然后您不需要內聯 JS，您只需查看值並使用hidden=value==="Yes"

 document.getElementById("container").addEventListener("click", function(e) { const tgt = e.target; const hide = tgt.value === "Yes"; tgt.closest("div").querySelector("div").hidden = hide; // hide the nested div })

 th { background-color: #dddddd }

 <div id="container"> <h1>Hide input fields based on radio button selection</h1> <h2>Frame</h2> <div> <h3>Propellers OK?</h3> <input type="radio" name="yesno" value="Yes">Yes <input type="radio" name="yesno" value="No">No<br> <div hidden> <input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" /> </div> </div> <div> <h3>Frame arms OK?</h3> <input type="radio" name="framearms" value="Yes" />Yes <input type="radio" name="framearms" value="No" />No <div id="framearmsDiv" hidden> <input type="checkbox" /> Replaced<br /> Date <input type="date" /><br /> Checked by <input type="text" /> </div> </div>... </div>

Answer 2

沒有 ID 為“framearms”的元素，這就是為什么它是 null

<input type="radio" name="framearms" onclick="javascript:yesnoCheck('framearms', 'framearmsDiv');" id="framearms" />Yes

Answer 3

Two issues found in your code

1. <input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="Yes" onclick="javascript:yesnoCheck(aftercheckbodyR, aftercheckbodyDiv);" >

Quotes are missing for input field as it should be string - id of control 

- <input type="radio" name="aftercheckbodyR" id="aftercheckbodyR" value="Yes" onclick="javascript:yesnoCheck('aftercheckbodyR', 'aftercheckbodyDiv');" 

2. In correct HTML - include 'aftercheckbodyDiv' <div> tag inside <td>

<td>
    <div id="aftercheckbodyDiv" style="display:table-cell">
       <input type="checkbox" id="aftercheckbodyC" value="Yes" />
     </div>
</td>