메이블
70
2021-03-29 17:59:03 작성 2021-03-29 17:59:38 수정됨
7
214

자바스크립트 체크박스 하나만 선택



function checkOnlyOne(element, n, m) {
  const checkbox = document.querySelector("#add_exop"+m+" input[name='base']");

  checkbox.forEach((cb) => {
      cb.checked = false;
  })
	    	
  element.checked = true;	    	
}
<td><input type="checkbox" name="base" onclick="checkOnlyOne(this, 0, 0);"></td>



id가 add_exop인 div 안에 테이블이 있고, td 안에 name이 base 인 checkbox가 있습니다.

div마다 같은 구조의 테이블이 있어서 #add_exop input[name='base'] 이런식으로 불러오려는데,

input[name='base'] 만 불러오면 일단 동작은 되는데 div 후손으로 불러오면 forEach에서 함수가 아니라고 오류가 나오더라고요..


checkbox 값은 제대로 들어옵니다!

그냥 div의 후손선택자들을 불러오는건데 왜 안되는지 모르겠네요ㅜ

혹시 해결방법 아시는 분 있으실까요?

0
  • 답변 7

  • Dierslair
    4k
    2021-03-29 18:00:54
    querySelectorAll 사용하셔야 합니다
  • 메이블
    70
    2021-03-29 18:03:01

    John Suhr 오마이갓..........불러올때 여러방식으로 해봤는데 저것만 쏙 빼놓고 했네요...ㅜ감사합니다

  • 연습용더미1
    579
    2021-03-29 18:03:19

    윗 분 말대로입니다.

    querySelector를 사용하면 가장 먼저 나오는 것 하나만 선택됩니다.

  • 메이블
    70
    2021-03-29 18:10:59

    연습용더미1 감사합니다ㅠㅠ혹시

    const checkbox = document.getElementById("add_exop"+m).getElementsByName("base");

    은 안되는 이유도 혹시 아실까요? 

  • karolus
    2021-03-29 18:22:37

    const checkbox = document.getElementById("add_exop"+m).querySelector("[name='base']");

  • 연습용더미1
    579
    2021-03-30 09:15:36 작성 2021-03-30 09:19:04 수정됨

    document.getElementById

    이 부분 부터가 이미 단일 개체를 선택하는 함수죠. 솔직히 저 뒤는 의미가 없습니다.

    다만 getElementsByName은 document에 정의된 함수라 getElementById 뒤에는 정의 자체가 안되어있을겁니다.

  • 메이블
    70
    2021-03-30 11:31:18

    연습용더미1 아..뒤에 아예 붙여쓰지도 못하는군요 감사합니다!!

  • 로그인을 하시면 답변을 등록할 수 있습니다.