checkbox적용 질문 드립니다...!

checkbox적용 질문 드립니다...!

QA

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타입은 체크박스이다.
    }
}
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
    }
을 사용해보려고 했지만 조건식에는 함수명을 넣어봤더니 똑같은 상태가 되더 라구요...
변수를 넣는 방법이 잘못됐을까요..?

답변을 작성하시기 전에 로그인 해주세요.
전체 185
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT