[jQuery] checkbox checked, 전체체크, 전체해제 등

  
[jQuery] checkbox checked, 전체체크, 전체해제 등 체크박스에 관하여

1. checked 여부 

- id 로 체크된 것을 찾을 경우

 $('input:checkbox[id="checkboxId"]').is(":checked") == true

- name 으로 체크된 것을 찾을 경우

 $('input:checkbox[name="checkboxName"]').is(":checked") == true

- 이렇게도 찾을 수 있다.

 $('input[name="checkbox_name"]').is(":checked");

- 체크된 갯수 (name 으로만 찾을 수 있다.)

$('input:checkbox[name="checkboxName"]:checked').length

- 짧게 체크 박스 checked 여부 확인하기

$("#checkboxId"]').is(":checked");

---

전체선택 하기
html 

전체선택 체크박스 - <th><input name="checkAll" type="checkbox" class="checkAll"></th>

Row 체크박스- <td><input name="checkbox" type="checkbox" class="check" value="checkedValue"></td>

javascript 
전체선택 체크박스 클릭 시 밑에 Row들 선택되도록

$('.checkAll').click(function(){
    $('.check').prop('checked', this.checked);
});

---

- 전체선택 후 체크된 Row 가 한개라도 선택이 되지 않으면 전체선택 해제하기   
그리고 하나씩 전부 선택했을때 전체선택이 체크 되게 하기

html

전체선택 체크박스 - <th><input name="checkAll" type="checkbox" class="checkAll"></th>

Row 체크박스- <td><input name="checkbox" type="checkbox" class="check" onclick="getChecked()" value="checkedValue"></td>

javascript
전체 row 갯수와 체크된 갯수가 같으면 전체선택 checked   
틀리면 전체선택 checked를 해제한다. 

function getChecked(){
    if( $('input[name="check"]:checked').length == rowCount ) {
        $('.checkAll').prop("checked", true);
    } else {
        $('.checkAll').prop("checked", false);
    }
}

 

---

- 체크박스 선택 해제하기

$("input[name='check']").prop("checked", false);

- 채크된 value Array에 넣기 

let valueArray = new Array;
$("input[name='check']:cheched").each(function(){
     valueArray.push(this.value);
});