input 3

HTML&CSS) 체크박스 눌렀을때 라벨에 CSS 변경하기. input 체크시 라벨 스타일 변경, checkbox label 변경

체크박스나 라디오버튼의 input을 누르면 라벨 style을 변경하고 싶었다. 예를들어 아래와 같은! 구글링 해보니 CSS에 + 연산자를 쓸 수 있었다. input[type=checkbox]:checked + label { background-color: orange; } 근데... 동작하지 않았다. + label 없애고 앞부분만 쓰면 잘 적용됐는데 "+ label" 만 붙이면 동작을 안했다. 뭐가 문제지.. vue 프로젝트로 하고있는데 vue에서는 지원 안하는건지 이리저리 찾다가 원인을 찾았다. +label 을 하려면 태그가 태그 뒤에 있어야 한다. 계속 보다보니 다른 글에서는 다 label과 input이 따로따로였다. 나는 label이 input을 감싼 상태였어서 적용이 안된거였다. 내 코드 가나다 ..

Front-end/HTML&CSS 2023.08.14

jQuery input값 가져오기 및 checkbox 체크여부 확인

input값을 가져올수 있는 방법은 아이디(id), 이름(name), 클래스(class)로 가져올 수 있다. 자바스크립트로 가져오는 방법과 jQuery로 가져올 수 있는 방법 두가지를 썼다. // 1. id값 document.getElementById("aaa").value(); $("#aaa").val() // 2. class 값 $(".aaa").val() document.getElementsClassName("aaa")[0].value(); 자바스크립트로 가져올때 배열 인덱스 값은 필수다! // 3. name값 %("[name=aaa]").val() %("input[name=aaa]").val() document.getElementsByName("aaa")[0].value(); checkbox 체크..

Front-end 2022.03.26

React) 이미지/파일 업로드 버튼

이미지와 파일 업로드는 input태그를 사용한다. function Home() { const [imgUrl, setImageUrl] = useState(); const onImgChange = (e) => { setImageUrl(e.target.files[0]); } return( + ) } type='file'로 설정하고 accept='image/*'로 하면 jpg, png 등 이미지 형태의 확장자를 가진 파일만 불러올 수 있다. 원하는 확장자의 파일만 불러오고 싶으면 accept='.pdf' 형태로 원하는 확장자만 적으면 된다. 또한 여러 개를 가져오고싶으면 multiple="multiple"을 적용!

Front-end/React 2021.11.27
반응형