jQuery 表單行顯示/隱藏：綁定事件、選擇器錯誤排查清單

現象：用 jQuery 控制「已有種類/新增種類」單選按鈕切換對應輸入行顯示隱藏，結果與預期不符。

最常見三大原因

1. jQuery 未正確載入：
   – `` 路徑錯誤、版本衝突、網路未載入。
   – Console 應無 `Uncaught ReferenceError: $ is not defined`。
   – 檢查 `Network` 面板 jquery 檔案狀態碼 200。
2. 選擇器不匹配：
   – ID/Class 拼寫錯誤、大小寫不一致 (HTML `id="type1"` vs JS `$('#Type1')`)。
   – 動態新增元素未重新綁定 (需用事件代理 `$(document).on('change', '.radio', fn)`)。
3. 邏輯與 CSS 衝突：
   – `display:none` vs `visibility:hidden` 混用。
   – 父元素 `display:none` 導致子元素 `show()` 無效。
   – CSS 權重 `!important` 覆蓋 jQuery inline style。

標準實作範本

 已有種類
 新增種類

已有下拉選單...
新增輸入框...

除錯步驟

1. Console 輸入 `$('input[name="category"]')` 看長度是否 >0。
2. 手動觸發 `$('input[name="category"]').trigger('change')` 觀察行是否切換。
3. Elements 面板檢查行元素 `style` 屬性是否在 `display: none/block` 間切換。
4. 若用 `bootstrap` 等框架，改用 `.collapse('show/hide')` 或 utility class `.d-none`。

90% 的「不生效」都是 **jQuery 沒載入** 或 **選擇器寫錯**，按清單逐項核對即可快速定位。