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