체크박스(checkbox) 정리

체크박스가 체크되어있는지 체크

js

function ischeck(){
  if(document.getElementById('checkbutton').checked) alert('체크되어있습니다.');
}

html

<input type="checkbox" value='1' id="checkbutton">check confirm 
<button type="button" onclick="ischeck()">확인</button>

See the Pen 자바스크립트 체크박스 > 체크유무체크하기 by younghyeong ryu (@wangta69) on CodePen.

체크박스 값 체크

js

function checkeval(){
  alert(document.getElementById('checkbutton').value);
}

html

<input type="checkbox" value='A' id="checkbutton">check confirm 
<button type="button" onclick="checkeval()">확인</button>

See the Pen 자바스크립트 체크박스 > 체크유무체크하기 by younghyeong ryu (@wangta69) on CodePen.

체크유무체크하기

js

function ischeck(){
  var f = document.forms.checklist;
  var i = 0;
  var chked = 0;
  for(i = 0; i  < f.length; i++ ) {
    if(f[i].type == 'checkbox') {
      if(f[i].checked) {
        chked++;
      }
    }
  }
  if( chked  < 1 ) {
    alert('한개이상 체크해주시기 바랍니다.');
    return false;
  }
}

html

<form id="checklist" onsubmit="return ischeck()">
  <input type=checkbox value='컴퓨터/인터넷'>컴퓨터/인터넷 
  <input type=checkbox value='여행/관광'>여행/관광 
  <input type=checkbox value='낚시'>낚시
  <input type=checkbox value='등산'>등산 
  <input type=checkbox value='골프'>골프  
  <button type="submit">전송</button>
</form>

See the Pen 자바스크립트 체크박스 > 체크유무체크하기 by younghyeong ryu (@wangta69) on CodePen.

체크박스의 체크박스 수량 체크하기

js

function CheckElement(index) {
  var nMin = 1;
  var nMax = 3;
  var nChecked = 0;
  var c = document.getElementsByName("interest[]")

  for( i = 0, nChecked = 0; i  < c.length; i++) if( c[i].checked) nChecked++

  if( nChecked > nMax) {
    alert( nMax + " 개 까지 선택할 수 있습니다.")
    c[index].checked = false
  }
  if( nChecked  < nMin) {
    alert( "적어도 " + nMin + " 개는 선택하셔야 합니다.")
    c[0].checked = true
  }
}

html

<input onClick="CheckElement(0)" type=checkbox value='컴퓨터/인터넷' name=interest[] checked>컴퓨터/인터넷 
<input onClick="CheckElement(1)" type=checkbox value='여행/관광' name=interest[] checked>여행/관광 
<input onClick="CheckElement(2)" type=checkbox value='낚시' name=interest[] checked>낚시
<input onClick="CheckElement(3)" type=checkbox value='등산' name=interest[] >등산 
<input onClick="CheckElement(4)" type=checkbox value='골프' name=interest[] >골프  

See the Pen 체크박스(checkbox) > 체크 수량 체크하기 by younghyeong ryu (@wangta69) on CodePen.

전체선택/해제하기 1

js

function mall_check_all(checkall){
  var checklist = document.getElementsByClassName('checklist');
  if(checkall.checked){
    for(i = 0; i  < checklist.length; i++ ) {
      if(checklist[i].type == 'checkbox') {
        checklist[i].checked = true;
      }
    }	
  }else{
    for(i = 0; i  < checklist.length; i++ ) {
      if(checklist[i].type == 'checkbox') {
        checklist[i].checked = false;
      }
    }
  }
}

html

<input onClick="javascript:mall_check_all(this);" type=checkbox>  Check All

<form>
  <input type="checkbox"  name="mall_chk1" value="1" class="checklist"> A
  <input type="checkbox"  name="mall_chk2" value="1" class="checklist"> B
  <input type="checkbox"  name="mall_chk3" value="1" class="checklist"> C
</form>

See the Pen 체크박스(checkbox) 정리 by younghyeong ryu (@wangta69) on CodePen.

전체선택/해제하기 2

• html

<form name="form">
  <input type="checkbox" /> 
  <input type="checkbox" /> 
  <a href="#" onclick="setCheckboxes('form', true); return false;">  모두 체크 </a>
  <a href="#" onClick="setCheckboxes('form', false); return false;"> 모두 체크안함 </a>     
</form>

• javascript

function setCheckboxes(form, do_check)
{
  var elts = document.forms[form].elements;
  var elts_cnt  = (typeof(elts.length) != 'undefined') ? elts.length : 0;

  if (elts_cnt) {
    for (var i = 0; i  < elts_cnt; i++) {
      if (elts[i].type == 'checkbox') {
        elts[i].checked = do_check;
      }
    } // end for
  }

  return true;
} // end of the 'setCheckboxes()' function

See the Pen 책크박스(checkbox) > 전체선택/해제하기2 by younghyeong ryu (@wangta69) on CodePen.

전체선택/해제하기 3

$(function(){
  $('input:checkbox[name="check-all"]').on('click', function() {
    var checked = $(this).is(":checked");
    $('input:checkbox[name="order[]"]').each(function() {
      $(this).prop('checked', checked);
    });
  });
})