checkbox적용 질문 드립니다...!
본문
안녕하세요 ! 투 두 리스트를 만들어보고 있는 학생입니다.
다름이 아니라 할 일을 +버튼으로 추가하고 나서 뜨는 li태그 중 체크 박스가 첫 번째 li태그에서만 먹혀서 어떻게 해야 할지 모르겠어서 질문 드립니다..!
나중에 추가한 요소의 체크 박스를 클릭하면 맨 처음 입력한 요소의 체크 박스에만 반응합니다..! 이게 html의 문제인지, css나 js의 문제인지 모르겠어서 질문 드려봅니다 ㅜㅜ!
.chch{
display: none;
}
label{
width: 19px;
height: 19px;
border: 2px solid #dfa2ff;
display: inline-block;
cursor: pointer;
border-radius: 12px;
}
input[type="checkbox"]:checked + label {
display: inline-block;
box-sizing: border-box;
width: 23px;
height: 23px;
background-color: #dfa2ff;
background-image: url(./check.png);
background-size: 18px 18px;
background-repeat: no-repeat;
background-position: center;
}
.tt{
display: inline-block;
width: 450px;
height: 30px;
font-size: 16px;
margin-left: 10px;
padding-top: 8px;
}
.rere{
display: inline-block;
box-sizing: border-box;
width: 55px;
height: 45px;
padding: 0px;
margin: 0px;
cursor: pointer;
background-image: url(./pen.png);
background-size: 20px 25px;
background-position: center;
background-repeat: no-repeat;
background-color: #fbe6fb;
border: 0px none;
cursor: pointer;
}
.btbt{
display: inline-block;
box-sizing: border-box;
width: 55px;
height: 45px;
padding: 0px;
margin: 0px;
background-color: #fbe6fb;
font-size: 23px;
cursor: pointer;
border: none;
border-radius: 0px 8px 8px 0px / 0px 8px 8px 0px;
background-image: url(./trash.png);
background-size: 20px 25px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.checkC{
text-decoration: line-through;
color: gray;
}
</style>
</head>
<body>
<div class="todo_box">
<h1 class="todo_title"> ToDo-List </h1>
<div class="text_button">
<input type="text" placeholder=" 할 일을 입력해주세요." class="text"/>
<input type="button" value="+" class="button"/>
</div>
<div class="ullist">
<ul class="ul">
<!-- <li id="ll"></li> -->
</ul>
</div>
<div class="delate">
<input type="button" value=" 선택 삭제 " class="check_delate"/>
<input type="button" value=" 전체 삭제 " class="delate_button"/>
</div>
</div>
<script src="todolist.js"></script>
</body>
</html>
자바스크립트 코드
function addd(){ //add버튼이 눌릴 때
if (text.value==false){ //만약 text입력칸에 아무것도 안 적고 add를 눌렀다면,
alert('할 일을 입력해주세요') //경고창이 뜨고
}else{ //그게 아니라 무언가 쓰여져 있다면
// 추가할 태그들 상수 지정하기
const li = document.createElement('li')//li태그 추가
const check = document.createElement('input') //체크박스 하나 만들고
const span = document.createElement('span') //글자 넣을 스판 태그 만들고
const retry = document.createElement('button') //수정 버튼 만들고
const xButton = document.createElement('button') //삭제 버튼 하나 만들고
const label = document.createElement('label') //체크박스 커스텀에 사용할 라벤 태그 만들어줌 ^^
//위 상수들에게 클래스 추가하기
li.classList.add('lii') // li에 lii클래스 속성값 추가
check.classList.add('chch') // check에 chch클래스 속성값 추가
span.classList.add('tt') // span에 tt클래스 속성값 추가
retry.classList.add('rere') // retry에 rere클래스 속성값 추가
xButton.classList.add('btbt') // 삭제 버튼에 class="btbt"인 클래스 속성값을 추가한다.
label.htmlFor='chchc' //라벨은 for을 정해줘야하는데, 그 값은 체크박스 id 속성값과 같아야 연결이 가능하다.
check.id='chchc'// 라벨 for과 체크박스의 id가 같아야 연결이 되기 때문에 체크박스에도 id를 추가했다.
//하위 항목에 추가할 타겟 정함
ul.appendChild(li) // ul태그에 li태그가 하위요소로 들어감
li.appendChild(check) // li태그에 check태그가 하위요소로 들어감
li.appendChild(label) //li 태그의 라벨 태그가 하위요소로 들어감
li.appendChild(span) // li태그에 span태그가 하위요소로 들어감
li.appendChild(retry) // li태그에 retry태그가 하위요소로 들어감
li.appendChild(xButton) // li태그에 xButton태그가 하위요소로 들어감
span.textContent = text.value //li의 텍스트는 text에서 입력한 값과 같다.
check.type='checkbox' // 상수 체크의 input타입은 체크박스이다.
답변 2
function addd(){ //add버튼이 눌릴 때
var text = document.getElementsByClassName('text')[0];
var ul = document.getElementsByClassName('ul')[0];
var id = Date.now();
if (text.value==false){ //만약 text입력칸에 아무것도 안 적고 add를 눌렀다면,
alert('할 일을 입력해주세요') //경고창이 뜨고
}else{ //그게 아니라 무언가 쓰여져 있다면
// 추가할 태그들 상수 지정하기
const li = document.createElement('li')//li태그 추가
const check = document.createElement('input') //체크박스 하나 만들고
const span = document.createElement('span') //글자 넣을 스판 태그 만들고
const retry = document.createElement('button') //수정 버튼 만들고
const xButton = document.createElement('button') //삭제 버튼 하나 만들고
const label = document.createElement('label') //체크박스 커스텀에 사용할 라벤 태그 만들어줌 ^^
//위 상수들에게 클래스 추가하기
li.classList.add('lii') // li에 lii클래스 속성값 추가
check.classList.add('chch') // check에 chch클래스 속성값 추가
span.classList.add('tt') // span에 tt클래스 속성값 추가
retry.classList.add('rere') // retry에 rere클래스 속성값 추가
xButton.classList.add('btbt') // 삭제 버튼에 class="btbt"인 클래스 속성값을 추가한다.
label.htmlFor='chchc'+id //라벨은 for을 정해줘야하는데, 그 값은 체크박스 id 속성값과 같아야 연결이 가능하다.
check.id='chchc'+id// 라벨 for과 체크박스의 id가 같아야 연결이 되기 때문에 체크박스에도 id를 추가했다.
//하위 항목에 추가할 타겟 정함
ul.appendChild(li) // ul태그에 li태그가 하위요소로 들어감
li.appendChild(check) // li태그에 check태그가 하위요소로 들어감
li.appendChild(label) //li 태그의 라벨 태그가 하위요소로 들어감
li.appendChild(span) // li태그에 span태그가 하위요소로 들어감
li.appendChild(retry) // li태그에 retry태그가 하위요소로 들어감
li.appendChild(xButton) // li태그에 xButton태그가 하위요소로 들어감
span.textContent = text.value //li의 텍스트는 text에서 입력한 값과 같다.
check.type='checkbox' // 상수 체크의 input타입은 체크박스이다.
}
}
소중한 답변 감사합니다!
Date.now() 를 통해서 달리 할 수도 있었네요 !
혹시 class속성값이 chchc1,chchc2,chchc3....이렇게 할 수 있는 방법은 없을까요?
전역변수 또는 쿠키 또는 스토리지 객체를 두고 증가시키며 동작하게 하는 방법이 있을것 같습니다.
label.htmlFor='chchc' //라벨은 for을 정해줘야하는데, 그 값은 체크박스 id 속성값과 같아야 연결이 가능하다.
check.id='chchc'// 라벨 for과 체크박스의 id가 같아야 연결이 되기 때문에 체크박스에도 id를 추가했다.
이 부분에 명시가 잘되어있네요.
id 는 고유값이어야합니다.
추가되는 체크박스 다 id 값이 chchc 로 동일한 값이 들어가서 그렇습니다.
+ 클릭할때마다 넘버링을 정해줘서 'chchc' + i 로 체크박스의 id 와 label 에 for 를 지정해주면 각각 체크 될 거에요.
답변 감사합니다!
클릭 할 때마다 id의 값이 1씩 더해지도록
for(let i=0; 1==addd; i+=1){
check.id='chchc'+ i
label.htmlFor='chchc'+i
}
을 사용해보려고 했지만 조건식에는 함수명을 넣어봤더니 똑같은 상태가 되더 라구요...
변수를 넣는 방법이 잘못됐을까요..?
답변을 작성하시기 전에 로그인 해주세요.
