[JQuery] input checkbox 체크박스 제어/체크박스 값 체크

 

■ JQuery input checkbox 체크박스 제어/체크박스 값 체크

---

■ checkbox 체크(checked) 여부 - 단일

<input type="checkbox" id="targetChkbox" name="tmpChkbox" ><label for="targetChkbox">체크박스</label>

<script type="text/javascript">
  // 1. ID값으로 접근
  if( $("#targetChkbox").is(":checked") == true ){
  	// 체크되었을때 실행
  }

  // 2. name값으로 접근
  if( $("input[name='tmpChkbox']").is(":checked") == true ){
  	// 체크되었을때 실행
  }
</script>

 

■ checkbox 체크(checked) 여부 - 다중 (name 배열)

<input type='checkbox' name='tmpChkbox[]' value='A'>
<input type='checkbox' name='tmpChkbox[]' value='B'>
<input type='checkbox' name='tmpChkbox[]' value='C'>

<script type="text/javascript">
  // 1. 해당 name과 동일한 모든 체크박스 루프 > 체크된 체크박스만 해당 value 값 콘솔
  $("input[name='tmpChkbox[]']").each(function(){
    if( $(this).is(":checked") == true ){
      var tmpVal = $(this).val();
      console.log(tmpVal);
    }
  });

  // 2. 해당 name과 동일한 체크박스 중 선택한 것들만 루프 > 해당 value 값 콘솔
  $("input[name='tmpChkbox[]']:checked").each(function() {
    var tmpVal = $(this).val();
    console.log(tmpVal);
  });
  
  
</script>

 

 

■ checkbox 체크(checked) 개수 가져오기- 다중 (name 배열)

<input type='checkbox' name='tmpChkbox[]' value='A'>
<input type='checkbox' name='tmpChkbox[]' value='B'>
<input type='checkbox' name='tmpChkbox[]' value='C'>

<script type="text/javascript">
  var tmpCnt = $("input[name='chk_"+ category +"[]']:checked").length;
  console.log(tmpCnt);
</script>

 

■ checkbox 체크(checked) 선택/해제

<input type="checkbox" id="targetChkbox" name="tmpChkbox"><label for="targetChkbox">체크박스</label>

<script type="text/javascript">
  // 선택
  $("input[name='tmpChkbox']").attr("checked", true);
  
  // 해제
  $("input[name='tmpChkbox']").attr("checked", false);
</script>

 

■ checkbox 체크(checked) - 선택된 체크박스 값 배열 생성

<input type='checkbox' name='tmpChkbox[]' value='A' checked>
<input type='checkbox' name='tmpChkbox[]' value='B' checked>
<input type='checkbox' name='tmpChkbox[]' value='C'>
<button type="button" onclick="clkBtn()">체크된 값 배열로 생성</button>

<script type="text/javascript">
  function clkBtn(){
    var chkArray = new Array();

    $("input[name='tmpChkbox[]']:checked").each(function() { 
      var tmpVal = $(this).val(); 
      chkArray.push(tmpVal);
    });

    if( chkArray.length < 1 ){
      alert("값을 선택해주시기 바랍니다.");
      return;
    }

    console.log(chkArray);	// (2) ["A", "B"]
  }
</script>