JavaScript

javascript(6) checkbox ,value, element[n]

Jini0 2018. 7. 30. 23:06

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p id="demo">여기가 p태그입니다</p>
<br><br>

<input type="text" id="id" size="10" value=""> <!-- form 태그 안에서의 input 은 name을 써야함 -->
<br><br>

<button type="button" onclick="myfunc()">버튼</button>

<p id="p1"></p>

<script type="text/javascript">


function myfunc() {


 //일반 tag,p,pre,h1~h6 도 얻어올 수 있음
 var pTag = document.getElementById("demo").innerHTML;
 
 //input(textpield) ,textarea
 var textF = document.getElementById("id").value; //text에 관한거는 다 value 로 얻어옴
 
 document.getElementById("p1").innerHTML = textF;
 document.getElementById("id").value = "문자열이 변경되었습니다.";


}

 

</script>

<form name="form1">
<input type="checkbox" id="ch1" name="ch1" , onclick="myfunc(0)">아이템1<br>
<input type="checkbox" id="ch2" name="ch2" , onclick="myfunc(1)">아이템2<br>
<input type="checkbox" id="ch3" name="ch3" , onclick="myfunc(2)">아이템3<br>

<input type="text" name="text1" value="hello">
</form>

 

 

 

name이 form1 인 form 안의 요소들은 각각의 0~-....  많은 것들을 가지고있엉

<script type="text/javascript">
function myfunc(n) {
 if(document.form1.elements[n].checked == true){ --체크 됐는지 확인 체크 됐을 때 참
  alert(n + "번째 체크박스가 체크 됨");
 }else{
  alert(n + "번째 체크박스가 체크 해제됨"); -- 체크 모양 풀릴때 나오는 모양
 }
 
 var name = document.form1.elements[3].value;
 alert("name =" + name);
}

 

</script>

</body>
</html>