javascript動(dòng)態(tài)添加checkbox復(fù)選框的方法
本文實(shí)例為大家介紹了javascript如何動(dòng)態(tài)添加checkbox復(fù)選框:
在實(shí)際應(yīng)用中可能需要?jiǎng)討B(tài)的添加復(fù)選框，下面就簡(jiǎn)單介紹一下如何實(shí)現(xiàn)此效果。
單純的創(chuàng)建一個(gè)復(fù)選框是很容易的，代碼如下:
var oCheckbox=document.createElement("input");
oCheckbox.setAttribute("type","checkbox");
oCheckbox.setAttribute("id","mayi");
但是這僅僅是是創(chuàng)建了一個(gè)checkbox對(duì)象，但是往往不能夠滿足實(shí)際需要，因?yàn)樵趯?shí)際應(yīng)用中，一般會(huì)在checkbox復(fù)選框前面或者后面有說(shuō)明性的文字，下面就介紹一下如何實(shí)現(xiàn)此效果:
方法就是創(chuàng)建一個(gè)checkbox對(duì)象，然后再創(chuàng)建一個(gè)文本節(jié)點(diǎn)，然后添加到div即可。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>添加checkbox復(fù)選框</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>
以上代碼動(dòng)態(tài)創(chuàng)建了一個(gè)checkbox對(duì)象，并且后面跟有文字，希望對(duì)大家的學(xué)習(xí)javascript有所幫助。
- 在js中單選框和復(fù)選框獲取值的方式
- js checkbox(復(fù)選框) 使用集錦
- Js動(dòng)態(tài)添加復(fù)選框Checkbox的實(shí)例方法
- javascript判斷單選框或復(fù)選框是否選中方法集錦
- JavaScript簡(jiǎn)單判斷復(fù)選框是否選中及取出值的方法
- JS實(shí)現(xiàn)復(fù)選框的全選和批量刪除功能
- js獲取單選框或復(fù)選框值及操作
- JS獲取復(fù)選框的值,并傳遞到后臺(tái)的實(shí)現(xiàn)方法
- JS實(shí)現(xiàn)CheckBox復(fù)選框全選全不選功能
- js中復(fù)選框的取值及賦值示例詳解
相關(guān)文章
下面小編就為大家?guī)?lái)一篇JS轉(zhuǎn)換HTML轉(zhuǎn)義符的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
JavaScript實(shí)現(xiàn)圖片懶加載與預(yù)加載的代碼詳解
圖片懶加載與預(yù)加載是前端優(yōu)化中比較常見(jiàn)的方法,也是前端面試中會(huì)被問(wèn)到的問(wèn)題,如果不做懶加載和預(yù)加載,瀏覽器的回流重繪很快,而圖片的加載是需要發(fā)送網(wǎng)絡(luò)請(qǐng)求的,一次性發(fā)很多請(qǐng)求就會(huì)導(dǎo)致網(wǎng)絡(luò)的堵塞,影響用戶體驗(yàn),接下來(lái)就讓我們來(lái)實(shí)現(xiàn)一下懶加載以及預(yù)加載的效果2025-03-03
JavaScript使用DeviceOne開(kāi)發(fā)實(shí)戰(zhàn)（一) 配置和起步
這篇文章主要介紹了JavaScript使用DeviceOne開(kāi)發(fā)實(shí)戰(zhàn)（一) 配置和起步的相關(guān)資料,需要的朋友可以參考下2015-12-12
微信小程序?qū)崿F(xiàn)左側(cè)滑動(dòng)導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左側(cè)滑動(dòng)導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
javascript 判斷字符串是否包含某字符串及indexOf使用示例
js javascript 判斷字符串是否包含某字符串,String對(duì)象中查找子字符及indexOf具體使用，感興趣的朋友可以參考下2013-10-10
本文為大家詳細(xì)介紹下使用Java/JS如何獲取flash的高寬，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-12-12
JS簡(jiǎn)單去除數(shù)組中重復(fù)項(xiàng)的方法
這篇文章主要介紹了JS簡(jiǎn)單去除數(shù)組中重復(fù)項(xiàng)的方法,涉及javascript針對(duì)數(shù)組的遍歷、判斷與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了javascript封裝的sqlite操作類,可實(shí)現(xiàn)SQLite數(shù)據(jù)庫(kù)的初始化及執(zhí)行SQL語(yǔ)句的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
sort會(huì)調(diào)用每一項(xiàng)的toString方法進(jìn)行比較，下面為大家介紹下JS中數(shù)組sort方法的具體使用2014-01-01
前端實(shí)現(xiàn)無(wú)感刷新的詳細(xì)方案
無(wú)感刷新（Silent Refresh）是指在用戶無(wú)感知的情況下,通過(guò)技術(shù)手段自動(dòng)更新身份憑證（如Token）,維持用戶登錄狀態(tài)的技術(shù)方案,本文給大家介紹了前端實(shí)現(xiàn)無(wú)感刷新的詳細(xì)方案,需要的朋友可以參考下2025-03-03