도쿄핫초코
18
2019-01-08 22:06:20 작성 2019-01-09 09:27:12 수정됨
9
221

안녕하세요. 체크박스 관련 질문을 드리겠습니다.


안녕하세요.

우리가 흔히 보는 일반 게시판을 생각해주시고 질문 들어갑니다.

게시판 로우의 첫번째 컬럼에는 체크박스가 있고 컬럼2, 컬럼3.... 이런식으로 이후 해당 컬럼에는 텍스트 값이 있습니다. 제가 원하는 것은 컬럼2의 텍스트 값에 따라 체크박스가 활성화 및 비활성화가 되면 됩니다.

그런데 이 체크박스에는 class 및 id 값이 없이 <input type="checkbox"> 로만 되어 있는 상태입니다.

그래서 저는 jquery 로 for 문을 돌려 해당 로우의 인덱스 값을 얻는데는 성공했습니다만,

인덱스에 해당하는 체크박스를 활성화 및 비활성화 시키려고 하는데.... 생각처럼 잘 안되네요.

혹시나 조언을 얻을 수 있다면 한 수 부탁 드립니다.

그리고 새 해 복 많이 받으시고 건강하시길 기원합니다. 감사합니다.


-------------------------------------------------

제가 설명을 제대로 못해서 참고하시라고 이미지를 그립니다.

AA

테스트

….

 

AA

테스트

….

 

BB

테스트

….

 


AA일때 체크박스 활성화 BB일때 비활성화 이런식으로 변경이 되면 됩니다.
0
0
  • 답변 9

  • 아이디온
    980
    2019-01-08 22:36:57

    그냥 게시판 만들때 id값을 주면 되지 않나요?

    방법은 있는데 겁나 귀찮으실 겁니다.

    0
  • 스톡허
    260
    2019-01-08 23:46:04

    간단하게 생각하면, onchange() 이벤트를 사용하시면 될 거 같네요. (아마도) 

    checkbox의 데이터가 변경 될 때 해당 row 값을 확인해서, 다음 row 의 활성화를 조절하면 될 거 같습니다. 

    0
  • 도쿄핫초코
    18
    2019-01-09 09:24:24

    아이디온

    이해가 안되시겠지만 id를 주면 안되는 상황이라 ㅠㅠㅠㅠㅠㅠㅠㅠ


    스톡허

    아래처럼 보시면 됩니다. 

    리스트의 컬럼값이 AA일 때 좌측의 체크박스를 활성화, BB일땐 비활성화.. 이런식으로 하기에

    onChange() 이벤트와는 무관한 것 같습니다.

    AA

    테스트

    ….

     

    AA

    테스트

    ….

     

    BB

    테스트

    ….

     

    0
  • 아이디온
    980
    2019-01-09 09:34:11
    tag명이 td checkbox인 셀렉터를 가져오셔서 같이 포문을 돌리면 되지 않을까 싶습니다. 순서는 같을테니까요.
    그리고 id하고 class를 지정하지 못하는 이유가 뭔지 궁금하네요.
    0
  • 도쿄핫초코
    18
    2019-01-09 09:49:06

    아이디온 

    숙제처럼 내준거라 id 없이 해보라네요...ㅠㅠ



    0
  • 무언가
    96
    2019-01-09 09:55:34

    해당 테이블의 input[type=checkbox] 선택자로 on change 이벤트를 설정하면 해당 테이블에서 체크값 변경이 있을 떄 해당 체크박스를 받아올 수 있습니다. 

    대충 아래와 같은 식으로 구현할 수 있을 것 같네요.



                $("input[name=chkLogType]").on("change", function() {
                    if ($(this).attr("id") == "chkAll") {
                        if ($(this).prop("checked")) {
                            $("input[name=chkLogType]").prop("checked", false);
                            $(this).prop("checked", true);
                        }
                    } else
                        $("#chkAll").prop("checked", false);
    
                });


    0
  • 도쿄핫초코
    18
    2019-01-09 10:10:21

    무언가 님

    감사합니다만 체크박스를 체크하고 안하고의 여부와는 상관없이

    AA

    테스트

    ….

     

    AA

    테스트

    ….

     

    BB

    테스트

    ….

     


    컬럼의 단순 텍스트 값이 AA일때는 왼쪽의 체크박스가 활성화, BB일때는 비활성화

    이런식으로 처리만 되면 되거든요 ㅠㅠ

    0
  • 무언가
    96
    2019-01-09 11:03:53

    아 단순 텍스트값이라면 다음과 같이 응용하면 됩니다. 

    html 의 dom 객체에 대해서 보시면 parent closest children find 등의 함수에 대해 이해가 편하실 것 같네요



    $("input[name=chkLogType]").each(function() {
    	var td_text = $(this).closest("tr").children().eq(1).text();
    	if(td_text = "AA")
    		$(this).prop("checked", true);
    });


    1
  • 도쿄핫초코
    18
    2019-01-09 11:22:51

    무언가님 감사합니다.

    id값이 없이 하려니 dom 객체에 대한 이해가 부족해서 이런 사단이 나고 있네요.

    한 수 가르침 진심으로 감사드리며, 댓글 달아주신 모두들 감사드립니다.

    그럼 다시 한 번 새 해 복 많이 받으시길 기원합니다^^

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