简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

javascript動態加入checkbox複選框的方法_javascript技巧

PHP中文网
發布： 2016-05-16 15:24:05
原創
2262 人瀏覽過

本文實例為大家介紹了javascript如何動態添加checkbox複選框:
在實際應用中可能需要動態的添加複選框，下面就簡單介紹一下如何實現此效果。
單純的建立一個複選框是很容易的，程式碼如下:


var oCheckbox=document.createElement("input");
oCheckbox.setAttribute("type","checkbox");
oCheckbox.setAttribute("id","mayi");
登入後複製


但是這只是創建了一個checkbox對象，但是往往不能夠滿足實際需要，因為在實際應用中，一般會在checkbox複選框前面或者後面有說明性的文字，下面就介紹一下如何實現此效果:
方法就是建立一個checkbox對象，然後再建立一個文字節點，然後再加入p即可。 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8">
<title>添加checkbox复选框</title>
<script type="text/javascript"> 
var oCheckbox=document.createElement("input");
var myText=document.createTextNode("蚂蚁部落");
oCheckbox.setAttribute("type","checkbox");
oCheckbox.setAttribute("id","mayi");
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 mydiv.appendChild(oCheckbox);
 mydiv.appendChild(myText);
}
</script> 
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
登入後複製

以上就是javascript動態加入checkbox複選框的方法_javascript技巧的內容，更多相關內容請關注PHP中文網（www.php.cn）！





相關標籤：
javascript，checkbox，动态添加
來源：php.cn
上一篇：jquery實作點擊其他區域時隱藏下拉div和遮罩層的方法_jquery 下一篇：node.js入門實例helloworld詳解_node.js
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
為各種產品類型設計具有多個參數的多功能產品表 我在表格設計方面沒有太多經驗。我的目標是創建一個或多個滿足以下要求的產品表：支援多種產品（電視、手機、PC...）。每種產品都有不同的參數集，例如：手機將具有顏色、尺寸、重量、作業...
來自於 2023-10-18 17:44:13
0
2
328
React - Handsontable資料網格：移動列並更新狀態 我正在使用React的庫，我有一個標題的列表（數組），另一邊是一個包含表格資料的陣列。閱讀文件後，我能夠啟用選單，其中我新增了「在左側新增列」和「在右側新增列」的選項，但這只是在視...
來自於 2023-09-15 21:51:29
0
1
307
為由JavaScript產生的AJAX HTML表格新增動態鏈接 我正在使用JavaScript生成HTML表格，用來填充來自AJAX檔案的資料。我想要動態地在某些單元格中添加鏈接，鏈接到myfile.php。我將讓PHP處理請求。每個單元格都應...
來自於 2023-09-15 11:20:12
0
1
198
在form/div標籤中動態新增表格 動態建立表出現在div標籤外部。我正在建立一個響應式註冊表單。輸入欄位取得使用者給定的表格所需的行數，並建立具有固定列數的所需行數。我創建了表格，但它沒有出現在我想要的位置。請大家...
來自於 2023-09-13 23:18:44
0
1
231
grid-template-rows: Repeat(auto-fill, 80px) 可以與 grid-auto-rows: 80px 互換使用嗎？ 我希望網格在添加動態內容時根據需要添加更多行。這就能解決問題：.grid{display:grid;grid-template-rows:80px;grid-auto-rows:8...
來自於 2023-09-12 21:10:45
0
1
289
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！