Bagaimana untuk menambah kotak semak secara dinamik menggunakan kemahiran javascript_javascript

PHP中文网
Lepaskan: 2016-05-16 15:24:05
asal
2308 orang telah melayarinya

Contoh dalam artikel ini memperkenalkan cara menambah kotak pilihan secara dinamik menggunakan javascript:
Dalam aplikasi sebenar, mungkin perlu menambah kotak semak secara dinamik Berikut ialah pengenalan ringkas tentang cara mencapai kesan ini.
Sangat mudah untuk membuat kotak semak sahaja, kodnya adalah seperti berikut:


var oCheckbox=document.createElement("input");
oCheckbox.setAttribute("type","checkbox");
oCheckbox.setAttribute("id","mayi");
Salin selepas log masuk


Tetapi ini Ia hanya mencipta objek kotak semak, tetapi ia selalunya tidak dapat memenuhi keperluan sebenar, kerana dalam aplikasi sebenar, biasanya terdapat teks penjelasan di hadapan atau di belakang kotak pilihan Berikut ialah pengenalan cara untuk mencapai kesan ini:
Kaedahnya adalah untuk mencipta objek kotak semak, kemudian mencipta nod teks, dan kemudian menambahnya pada 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>
Salin selepas log masuk

Di atas ialah kaedah menambah kotak semak secara dinamik dalam kemahiran javascript_javascript Untuk kandungan yang lebih berkaitan, sila perhatikan laman web PHP Cina (www.php.cn)!





sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan