본문 바로가기
공돌이 작업실

체크박스 라디오버튼 셀렉트박스 정리 (전체 체크버튼구현)

by 미젤 2020. 7. 3.

라디오버튼, 체크박스, 셀렉트박스
미묘하게 다 다른 녀석들ㅂㄷ

맨날 찾아보다가 결국 내가 쓴다 후

form 과 함께 쓰일때, 체크된 내용을 계속 주고받아야 할 필요가 있을때 Vo 에서 배열로 선언해주어야 한다.
까먹고있다가 왜 안되지 삽질하다가 싹 바꿈. 배열이 나은게 db에서 조회할때도 mybatis에서 배열 조회하는게 더 쉬움..
예전에 혼자 삽질하던 기억이 뭉게뭉게

체크박스 선택되었는지 확인

var total = $("input:checkbox[id='TOTAL']").is(":checked");
if (total) {
  alert('Total 버튼에 체크하였습니다.');
}

체크/언체크하기, 선택된 값 가져오기

//체크
$("#radioButton").prop('checked', true);
//언체크
$("#radioButton").prop('checked', false);

//셀렉트박스 선택된 값 가져오기 
$("#riskStatusSelect").val();    //멀티인 경우 배열로 리턴됨
$("#riskStatusSelect option:selected").val();    //멀티더라도 하나만 리턴됨

배열로 받았을땐 Object 라서 toString() 으로 문자열로 변환해주고 split 등등을 할수있다.
문자열로 변환되면 "value1,value2,value3" 처럼 콤마로 구분이 된 문자열을 얻게된다.

체크박스 일괄 체크/언체크하기. 전체선택 기능 구현

//전체버튼이 클릭될때마다 호출
function clickTotal() {
  //특정 id를 가진 체크박스의 체크유무확인
  var total = $("input:checkbox[id='TOTAL']").is(":checked");
  if (total) {
    // 해당 name 의 모든 체크박스들이 체크된다.
    $("input:checkbox[name='searchCheckBox']").prop("checked", true);
  } else {
    // 해당 name 의 모든 체크박스들이 언체크된다.
    $("input:checkbox[name='searchCheckBox']").prop("checked", false);
  }
}

//전체버튼 이외의 버튼들이 클릭될때마다 호출
function clickCheckButton() {
  //전체버튼 갯수 구하기
  var length = $("input:checkbox[name='searchCheckBox']").length;
  //선택된 체크버튼의 갯수 구하기
  var checked = $("input:checkbox[name='searchCheckBox']:checked").length;
  var total = $("input:checkbox[id='TOTAL']").is(":checked");
  if (checked == length-1 && total == false) {
    $("input:checkbox[id='TOTAL']").prop("checked", true);
  } else if (total == true && checked < length) {
    $("input:checkbox[id='TOTAL']").prop("checked", false);
  }
}

체크박스 값 가져오기

//여러개가 체크되어 있더라도 하나의 값만 리턴함.
$("input:checkbox[name=checkBoxList]:checked").val();

var checkResult;
$("input:checkbox[name=checkBoxList]:checked").each(
  function (){
    checkResult +=  $(this).val() + ",";
  }
);

진짜 체크박스는 저거말고 한번에 값을 들고오는 방법이 없는건가 ?

'공돌이 작업실' 카테고리의 다른 글

맥과 윈도우 파일을 업로드하는데 서로 달라요..?!?  (0) 2020.02.05
기본기들  (0) 2019.05.04
갑자기 클로저가 땡기네  (0) 2019.05.04
2018 회고라.  (0) 2019.01.03
이직준비  (0) 2018.12.01

댓글