체크박스 전체선택,전체해제,선택반전, 체크박스 선택갯수 확인 및 값 확인

<script>

function checkboxSelectQue(n,obj) {

    var i;

    var chk = document.getElementsByName(obj);

    var tot = chk.length;

    for (i = 0; i < tot; i++) {

        if (n == 1) chk[i].checked = true;

        if (n == 2) chk[i].checked = false;

        if (n == 3) chk[i].checked = !chk[i].checked;

    }

}

 

function checkboxSelectCount(obj) {

    var i, sum=0, tag=[], str="";

    var chk = document.getElementsByName(obj);

    var tot = chk.length;

    for (i = 0; i < tot; i++) {

        if (chk[i].checked == true) {

            tag[sum] = chk[i].value;

            sum++;

        }

    }

    str += "선택갯수 : "+sum;

    if(tag.length > 0) str += "\n값 : "+tag.join(",");

    alert(str);

}

</script>

<input type="button" value="전체선택" onclick="checkboxSelectQue(1,'chk[]')" />

<input type="button" value="전체해제" onclick="checkboxSelectQue(2,'chk[]')" />

<input type="button" value="선택반전" onclick="checkboxSelectQue(3,'chk[]')" />

<input type="button" value="선택갯수 및 값 확인" onclick="checkboxSelectCount('chk[]')" />

<br />

<label><input type="checkbox" name="chk[]" value="1" />체크박스 1</label>

<label><input type="checkbox" name="chk[]" value="2" />체크박스 2</label>

<label><input type="checkbox" name="chk[]" value="3" />체크박스 3</label>

<label><input type="checkbox" name="chk[]" value="4" />체크박스 4</label>

<label><input type="checkbox" name="chk[]" value="5" />체크박스 5</label>

  

<br /><br />

  

<input type="button" value="전체선택" onclick="checkboxSelectQue(1,'chktest')" />

<input type="button" value="전체해제" onclick="checkboxSelectQue(2,'chktest')" />

<input type="button" value="선택반전" onclick="checkboxSelectQue(3,'chktest')" />

<input type="button" value="선택갯수 및 값 확인" onclick="checkboxSelectCount('chktest')" />

<br />

<label><input type="checkbox" name="chktest" value="1" />체크박스 1</label>

<label><input type="checkbox" name="chktest" value="2" />체크박스 2</label>

<label><input type="checkbox" name="chktest" value="3" />체크박스 3</label>

<label><input type="checkbox" name="chktest" value="4" />체크박스 4</label>

<label><input type="checkbox" name="chktest" value="5" />체크박스 5</label>