JS로 input checkbox 제어하기

 

 

 

폼을 만들다 보면 JS로 checkbox 상태를 제어해야할 때가 종종 있다.

 

1. JS로 제어하는 방법

<label for ="cbox">체크박스</label>
<input type="checkbox" id="cbox" name="cbox">
<button id="btn">체크하기</button>

<script>
var cbox = document.getElementById("cbox");
var btn = document.getElementById("btn");

//이벤트 걸어준 후
btn.addEventListener('click', function(){
		//checked 제어
	 	cbox.checked = true;
});
</script>

 

2. jQuery로 제어하는 방법

<label for ="cbox">체크박스</label>
<input type="checkbox" id="cbox" name="cbox">
<button id="btn">체크하기</button>

<script>
$('#btn').on('click', function(){
  $('#cbox').prop('checked', true);
  $('#cbox').attr('checked', true);
});
</script>