[JS] 표에 체크박스 넣기 JQuery 특정 체크 박스 전체 선택, 전체 해제

항목별로 체크하는 그런 테이블을 만듦

 

* 대분류 같은 느낌의 colspan

`<tr><td colspan="7" style="text-align:center; border-top: 1px solid var(--bg-color);

border-bottom: 1px solid var(--bg-color);;">${대분류}</td><tr>`

 

* 체크박스 이렇게 넣음

<td><label class="asmCheckContainer class">

          <input type="checkbox" class="${전체선택박스 또는 일반체크박스}" 

name="${Row 구분자}"><span class="asmCheckMark"></span>

     </label></td>

 전체 선택 체크 박스의 클래스는 'checkAll', 일반 체크 박스는 'chkbox'

* 전체 선택 체크박스를 눌렀을 때 해당 row의 체크박스만 체크되게하는 코드

$(".checkAll").click(function() {

        var chkrow=this.name;

        var chkall=this.checked;

        $(`input[name=${chkrow}]:checkbox`).each(function() {

            $(this).attr("checked", chkall);

        });

    });

 

* bool값들을 가져와서 체크상태를 설정해주는 코드 (데이터안에는 10101010의 문자열)

 function setCheck(데이터){

        var data=데이터.join('');

        $(`input[class="chkbox"]:checkbox`).each(function() {

            var bool=data.slice(0,1)=='1'?true:false;

            data=data.substring(1);

            $(this).attr("checked", bool);

        });

    }

 

* 체크박스의 bool 값을 가져오는 코드

function getCheck(){

        var Data='';

        $(`input[class="chkbox"]:checkbox`).each(function() {

//$(`input[name=box]:checked`).each(function() { 또는 이렇게 체크된 애들만 가져올수도 있음

            if(this.checked){

                Data+='1';

            }

            else{

                Data+='0';

            }

        });

        return Data;

    }

 

++ JQuery로 요소 Id, 클래스, 이름 가져오기

<input id="eId" name="eName" class="eClass" />

    var element = $(".eClass");

    var element = $("#eId");

    var element = $('input[name="eName"]');

    var eid = element.attr('id');

    var ename = element.attr('name');

    var eclass = element.attr('class');

 

+++ JQuery로 요소 스타일, 속성 설정

.attr('class') 요소의 class 속성 값 가져옴

.attr('style','display:none') style 속성에 display:none 추가

.css('display','none') display 속성을 none으로 설정