[JavaScript] 체크박스 선택/해제 여러가지 모음

안녕하세요. 소다맛사탕 입니다.

지난번 포스팅 이었던 '[JavaScript] 체크박스 전체 선택/해제'에 이어서

오늘은 체크박스 선택/해제 하는 여러가지 모음을 준비해 봤습니다.

 

JavaScript

$(function()({
    // 해당 전체 체크박스 선택/해제
    $("input[name=chkAll]").click(function(){
        fncChkedAll();
    });
    // 체크박스 일부 해제 및 전체선택 조건
    $("input[name=chkVal]").click(function(){
        fncChkedVal();
    });
    // 짝수/홀수 선택
    fncNthChild();
    // 특정 동일 값 선택
    fncChkGetValue();
    // 모든 체크박스 해제
    $("input[name=allNonChk]").click(function(){
        $(":checkbox").prop("checked",false);
    });
});

function fncChkedAll(){
    var chkAll = $("input[name=chkAll]");
    var chkVal = $("input[name=chkVal]");
    if(chkAll.is(":checked")){
        $(chkVal).prop("checked",true);
    } else {
        $(chkVal).prop("checked",false);
    }

}
function fncChkedVal(){
    var chkAll = $("input[name=chkAll]");
    var chkVal = $("input[name=chkVal]");
    var chkFlag = false;
    for(var i = 0; i < chkVal.length; i++){
        if($(chkVal).eq(i).is(":checked")){
            chkFlag = true;
        } else {
            chkFlag = false;
        }
    }
    if(chkFlag){
        $(chkAll).prop("checked",true);
    } else {
        $(chkAll).prop("checked",false);
    }
}

function fncChkGetValue(){
    var chkVal = $("input[name=chkVal]");
    $("[name=ynClick]").click(function(){
        $("input[name=chkVal][value="+$(this).val()+"]").prop("checked",true);
    });
}

function fncNthChild(){
    $("[name=evenClick]").click(function(){
        $("input[name=chkdif]:nth-child(even)").prop("checked",true);
    });

    $("[name=oddClick]").click(function(){
        $("input[name=chkdif]:nth-child(odd)").prop("checked",true);
    });
}

1. 전체 체크박스 선택/해제

전체 버튼 클릭시 체크박스 전체 선택.

 

2. 동일한 값 선택

버튼에 해당 값을 선언하고 동일한 값을 가진 체크박스를 선택.

 

3. 짝수/홀수 선택

짝수/홀수 번 째 체크박스 선택.

 

HTML

<span>※전체 체크박스 선택/해제</span>
<div>
    <label for="all">전체<input type="checkbox" name="chkAll" id="all" /></label>
    <label for="chkval1">A<input type="checkbox" name="chkVal" value="Y" id="chkval1" /></label>
    <label for="chkval2">B<input type="checkbox" name="chkVal" value="N" id="chkval2" /></label>
    <label for="chkval3">C<input type="checkbox" name="chkVal" value="N" id="chkval3" /></label>
    <label for="chkval4">D<input type="checkbox" name="chkVal" value="Y" id="chkval4" /></label>
    <label for="chkval5">E<input type="checkbox" name="chkVal" value="Y" id="chkval5" /></label>
</div>

<span>※ VALUE Y/N 선택</span>
<div>
    <button type="button" name="ynClick" value="Y">Y클릭</button>
    <button type="button" name="ynClick" value="N">N클릭</button>
</div>

<span>※ 짝수/홀수 선택</span>
<div>
    <input type="checkbox" name="chkdif" value="Y" >가</input>
    <input type="checkbox" name="chkdif" value="N" >나</input>
    <input type="checkbox" name="chkdif" value="Y" >다</input>
    <input type="checkbox" name="chkdif" value="N" >라</input>
    <input type="checkbox" name="chkdif" value="Y" >마</input>
</div>
<div>
    <button type="button" name="evenClick">짝수</button>
    <button type="button" name="oddClick">홀수</button>
</div>

<span>※ 전체 체크 해제</span>
<div>
    <input type="button" name="allNonChk" value="전체해제"/>
</div>

---

테스트용 HTML을 적용 했습니다.

아래의 체크박스 및 버튼을 클릭해 보세요.

 

☞ HTML은 대충 만들어서 모양이 이쁘지 않을 수 있습니다. 양해해 주세요.

    해당 테스트는 PC에서만 됩니다.

 

※전체 체크박스 선택/해제

전체 A B C D E

---

※ VALUE Y/N 선택

클릭 클릭

---

※ 짝수/홀수 선택

가 나 다 라 마

---

※ 전체 체크 해제

 

 

※ 체크박스를 선택하는 모든 케이스를 옮긴게 아니므로, 여러가지 방식을 통해 직접 만들어 보세요.