고정 헤더 영역
상세 컨텐츠
본문
728x90
html의 form에서 선택된 checkbox의 값만 넘겨주려면 input:checkbox의 name값을 배열로 만들어주면 된다.
예를들어 checkbox의 이름을 checkList라고 할거라면
<html>
<head>
<!-- 중략 -->
</head>
<body>
<!-- 중략 -->
<input type="checkbox" name="checkList[]" value="값1" />
<input type="checkbox" name="checkList[]" value="값2" />
<input type="checkbox" name="checkList[]" value="값3" />
</body>
</html>이렇게 name 값 뒤에 [] 배열 선언만 해주면 된다.
이렇게 체크한 값의 값만 배열로 넘어가게 된다.
// 기존 코드
$("input:checkbox[name=checkList]:checked");그렇다면 jQuery에서 해당 값을 선택하려면 기존의 코드에서 변경해야할 것이다.
어떻게 해야되나 한참 삽질하던 찰나에 쉬운 방법을 찾았다.
참고한 사이트: https://chicpro.dev/jquery-input-%EB%B0%B0%EC%97%B4%EC%9D%BC-%EB%95%8C-selector/
[jQuery] input 배열일 때 selector – CHICPRO
chicpro.dev
// 기존 코드
$("input:checkbox[name=checkList]:checked");
// 변경 코드
$("input:checkbox[name='checkList[]']:checked");이렇게 name 값을 따옴표로 감싸주면 된다는 것이였다.
테스트해보니 정상적으로 동작하였다 ㅎㅎ
728x90
반응형
'JavaScript' 카테고리의 다른 글
| [javascript] 문자 아스키코드 변환 & 아스키코드 문자로 변환하는 법 feat.프로그래머스 시저 암호 풀이 (0) | 2021.12.03 |
|---|---|
| [javascript] 자바스크립트에서 cookie를 조회하고 저장하고 삭제하는 법 // 웹 쿠키 다루는 법! (0) | 2021.11.30 |
| [JavaScript, react] onClick 시 겹쳐진 밑 부분 이벤트 발생 막기 / 이벤트 버블링 막기 (0) | 2021.11.29 |
| [javascript] formData에 들어있는 값 반복문을 통해 확인하는 법 (0) | 2021.11.24 |
| [javaScript] 동적 변수 생성하기, 변수 이름 합쳐서 생성하기 (No eval, window함수) (0) | 2021.11.23 |
