[Javascript/JQuery]CheckBox의 Check한 값 가져오기 / Check값 적용하기

[Javascript/JQuery]CheckBox의 Check한 값 가져오기 / Check값 적용하기

안녕하세요 미나라이입니다.

 

이번에는 웹개발 하면서 자주 쓰게되는 체크박스의  선택된 값을 가져오는 소스를 정리 해 보았습니다.

 

Check한 값 받아오기

Javascript

<p>CheckData :<span id="result"></span></p>
<input type="checkbox" name="color" value="red" checked />Red
<input type="checkbox" name="color" value="blue" />Blue
<input type="checkbox" name="color" value="yellow" />Yellow
<input type="button" value="Button" onclick="clickBtn()" /> 
    
<script>
  function clickBtn() {
    // 체크한 데이터를 담을 배열 선언
    const arr = [];
    // Name이 Color인 속성 취득
    const color = document.getElementsByName("color");
    // 취득한 속성 만큼 루프
    for (let i = 0; i < color.length; i++) {
      // 속성중에 체크 된 항목이 있을 경우
      if (color[i].checked == true) {
      	arr.push(color[i].value);
      }
    }
    // 결과를 표시
    document.getElementById("result").textContent = arr;
  }
</script>

 

Jquery

<p>CheckData :<span id="result"></span></p>
<input type="checkbox" name="color" value="red" checked />Red
<input type="checkbox" name="color" value="blue" />Blue
<input type="checkbox" name="color" value="yellow" />Yellow
<input type="button" value="Button" />

$(document).ready(function() {
  // 버튼 클릭 이벤트
  $("input[type='button']").click(function() {
    // 체크한 항목을 담을 배열 선언
    const arr = [];
    // 체크한 항목만 취득
    var color = $("input[name='color']:checked");
    $(color).each(function() {
    	arr.push($(this).val());
    });
    
    // 변수로 다이렉트로 담을 경우에는 가장 위에 체크한 항목이 들어감
	var color1 = $("input[name='color']:checked").val();
    
    $("span").text(arr);
  });
});

 

체크박스에 Checked적용하기

Javascript

<input type="checkbox" name="color" value="red" checked />Red
<input type="checkbox" name="color" value="blue" />Blue
<input type="checkbox" name="color" value="yellow" />Yellow 
    
<script>
  // 페이지 실행시 적용하기 위해서는 태그보다 아래에 선언 해야 한다.
  const color = document.getElementsByName("color");
  for (let i = 0; i < color.length; i++) {
    if( i == 1 ) {
      color[i].checked = true;
    }
  }
</script>

 

Jquery

<input type="checkbox" name="color" value="red" checked />Red
<input type="checkbox" name="color" value="blue" />Blue
<input type="checkbox" name="color" value="yellow" />Yellow 
    
<script>
  // 페이지 실행시 적용하기 위해서는 태그보다 아래에 선언 해야 한다.
  var color = $("input[name='color']");
  $(color).each(function(e) {
    if(e == 1) {
    	$(this).attr("checked", true);
    }
  });
</script>