如何使用jQuery中的方法動態生成checkbox核取方塊

2019-12-11 11:24:44

在我們做專案的過程中，可能遇到這麼一個問題：在div標籤元素內，動態插入多個checkbox核取方塊，並根據實際的情況生成；而且需要動態設定核取方塊的樣式。下面利用一個範例說明如何動態生成核取方塊，操作如下：

第一步，由於要使用到jQuery，這裡在新建的靜態頁面中引入jquery核心檔案，如下圖所示：

第二步，在<body></body>主體元素內，插入一個<div></div>並設定對應的ID屬性，如下圖所示：

第三步，接著在jQuery初始化函數內，動態遍歷生成核取方塊，然後新增到div標籤內，如下圖所示：

第四步，儲存程式碼並在瀏覽器檢視介面顯示效果，結果發現核取方塊和文字相距很遠，如下圖所示：

第五步，再次返回到HBuilder編輯工具，修改input核取方塊的樣式，如下圖所示：

第六步，再次儲存程式碼並預覽效果，可以發現核取方塊和文字放在一起，如下圖所示：