>웹 프론트엔드 >JS 튜토리얼 >javascript_javascript 기술을 사용하여 체크박스를 동적으로 추가하는 방법

javascript_javascript 기술을 사용하여 체크박스를 동적으로 추가하는 방법

PHP中文网
PHP中文网원래의
2016-05-16 15:24:052331검색

이 기사의 예에서는 자바스크립트를 사용하여 체크박스를 동적으로 추가하는 방법을 소개합니다.
실제 애플리케이션에서는 체크박스를 동적으로 추가해야 할 수도 있습니다. 다음은 이 효과를 얻는 방법에 대한 간략한 소개입니다.
체크박스를 만드는 것은 매우 쉽습니다. 코드는 다음과 같습니다.


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


하지만 this 체크박스 객체를 생성할 뿐 실제 요구 사항을 충족하지 못하는 경우가 많습니다. 왜냐하면 실제 애플리케이션에서는 일반적으로 체크박스 앞이나 뒤에 설명 텍스트가 있기 때문입니다. 다음은 이 효과를 얻는 방법에 대한 소개입니다.
방법은 다음과 같습니다. 확인란 개체를 만든 다음 텍스트 노드를 만든 다음 이를 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_javascript 스킬에 체크박스를 동적으로 추가하는 방식입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!





성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.