checkbox, radio, text 각 타입 - 체크및 비활성화

전체 초기화에는 크게 두가지 정도의 방법이 있다.

 

첫번째. 객체가 가진 각 타입의 항목별 길이만큼 for문으로 조회하여 쓰거나,

 

두번째. 선택자가 있을경우 선택된 요소 집합만큼 반복되는 함수인 each 메서드를 를 활용하여 체크해제를 할 수 있다.

 

 

1-1. for문을 이용한 체크해제 (non jQuery)

var _input = document.getElementByTargetName("input");

for(var i=0; i<_input.length; ++i){
 //1.체크박스 초기화
 if(_input[i].type == "checkbox") _input[i].checked = false;

 //2.라디오 초기화
 if(_input[i].type == "radio") _radio[i].checked = false;

 //3.텍스트 초기화
 if(_input[i].type == "text"){
  _input[i].value = "";
 }
}

 

 

1-2. for문을 이용한 체크해제 (jQuery)

for(var i=0; i<_input.length; ++i){
 //체크박스초기화
 $(".search_" + i).attr("checked",false);

 //라디오
 $(".search_" + i).attr("checked",false);

 //text
 $(".search_" + i).attr("value", "");
}

 

 

2. each메서드를 이용한 체크해제

//체크박스 모두 체크
$("#check_id").click(function(){
 $("input[name=box]:checkbox").each(function() {
  $(this).attr("checked", true);
 });
});

//체크박스 모두 해제
$("#uncheckAll_id").click(function(){
 $("input[name=box]:checkbox").each(function() {
  $(this).attr("checked", false);
 });
});


//체크되어 있는 값 추출
$("#getCheckedAll_id").click(function(){
 $("input[name=box]:checkbox").each(function() {
  var test = $(this).val();
  console.log(test);
 });
});

//서버에서 받아온 데이터 체크하기(콤마로 받은경우)
$("#updateChecked").click(function() {

 var splitCode = $("#splitCode").val().split(",");
  for (var idx in splitCode) {
  $("input[name=box][value=" + splitCode[idx] + "]").attr("checked", true);
 }
});

 

ps. 비활성화방법

_input[i].disabled = true; //비활성화 됨

$("_input[name^='ans5'"]").attr("disabled",false)