|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="checkbox" name="long" value="전체">전체<br>
<input type="checkbox" name="sport" value="야구">야구<br>
<input type="checkbox" name="sport" value="축구">축구<br>
<input type="checkbox" name="sport" value="배구">배구<br>
<input type="checkbox" name="sport" value="농구">농구<br>
<textarea name="ta" id="ta" cols="30" rows="10"></textarea>
<script>
window.onload = function () {
//1. 태그에대한 참조를 얻는다.
let inputArr = document.getElementsByTagName('input');
let ta = document.getElementById('ta');
//이벤트를 등록한다
for (let i = 0; i < inputArr.length; i++) {//체크박스가 체크되어있는지 안되어있는지 경우를 나눠야한다.
inputArr[i].onclick = function () {//클릭이벤트 발생후에
if (inputArr[i].checked) {//체크가 되어있다면
if (i == 0) { //전체 박스 체크
//이름을 따로 줘서 처리하는게 좋을꺼같으니 all로 선언해준다
let tempArr = document.getElementsByName("sport");//sport이름을 전부 가져와 배열 만들어주고
for (let j = 0; j < tempArr.length; j++) {
ta.innerHTML += tempArr[j].value;
}
}
else { //하나 하나 박스체크
//클릭하면 textarea에 value값을 얻는다.
ta.innerHTML += inputArr[i].value;
}
} else {//체크가 되어있지 않은경우
if (i == 0) { //전체 박스 체크해제
} else {//에러 한번은 작동하는데 작동후에 다시 돌아오지 않는다.
// ta.innerHTML -= inputArr[i].value;
ta.value = ta.value.replace(ta.value.substr((ta.value.indexOf(inputArr[i].value)), inputArr[i].value.length), '');
}
}
}
}
}
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
select {
width: 300px;
height: 300px;
margin: 10px;
}
div {
display: inline-block;
}
button {
display: black;
width: 50px;
height: 50px;
margin: 5px;
}
</style>
</head>
<body>
<select id="leftlist" multiple>
<option id ='baseball' value="sport">야구
<option id ='football' value="sport">축구
<option id ='ballyball' value="sport">배구
<option id ='basketball' value="sport">농구
</select>
<div>
<button id="leftAll">
<<</button> <button id="left">
<</button> <button id="right">>
</button>
<button id="rightAll">>></button>
</div>
<select id="rightlist" multiple>
</select>
<script>
//<< 버튼을 클릭했을 때 발생하는 이벤트에 대해서 설정한다.
var back = document.getElementById('leftlist');
var send = document.getElementById('rightlist');
var leftlistArr = document.getElementsByTagName('option');//왼쪽 리스트에 있는 것들에 대해서 배열로 만들기
var rightlistArr = document.getElementsByTagName('option');
rightAll.onclick = function () { //append사용해서 처리
send.append(...back.options);//option이 작동을 안한다. 복수라 options? 단수일때는 option만사용?
}
leftAll.onclick = function () {
back.append(...send.options);
}
right.onclick = function(){
send.append(...back.selectedOptions);
//console에서는 뜨는데 왜 여기서는 안뜨지
}
left.onclick = function(){
back.append(...send.selectedOptions);
//console에서는 뜨는데 왜 여기서는 안뜨지
}
'IT > JavaScript' 카테고리의 다른 글
| 용어정리 (0) | 2020.04.28 |
|---|---|
| Closure (0) | 2019.06.14 |
| 다차원 배열 (0) | 2019.06.13 |
| Event (0) | 2019.06.12 |
| DOM(Document Object Model) (0) | 2019.06.12 |
댓글