[CSS] input label 버튼을 클릭했을 때 이벤트 발생시키기

Hmm·2022년 1월 13일
0

CSS / SCSS

목록 보기
1/9


이렇게 요일을 선택할 수 있는 checkbox를 만들었다.

                
                  <input
                    type="checkbox"
                    id="dayChoice1"
                    name="daysInput"
                    value="1"
                    onClick={dayOnClick}
                  ></input>
                <div className="dayLabelDiv">
                  <label htmlFor="dayChoice1"></label>
                </div>

(참고로 < input>은 display:none을 해놓았음)
그런데 문제는, 저 네모 버튼을 클릭할때 체크되는게 아니라, 텍스트를 정확히 눌러야 체크가 된단 것이었다.

해결책은 간단하다.
div로 label을 감싸지 말고, label로 div를 감싸면 된다.

               <input
                 type="checkbox"
                 id="dayChoice1"
                 name="daysInput"
                 value="1"
                 onClick={dayOnClick}
               ></input>
               <label htmlFor="dayChoice1">
                 <div className="dayLabelDiv"></div>
               </label>

0개의 댓글