웹솔루션개발 25년 노하우! 해피CGI의 모든것

위처럼 체크박스 그룹을 만들고 상단의 체크를 하면 하위 모든 체크박스가 체크 되는 기능입니다. 사용법은 간단합니다. 상단 다운로드 버튼을 눌러 다운 받은 후 cbFamily-v1.js 를 로드 합니다. 그리고 샘플로 명시된 코드처럼 진행하시면 됩니다. 설문조사 등의 페이지를 만들때 유용해 보이니 활용해 보시기 바랍니다.

Css를 이용한 체크박스 스위치 디자인입니다. 압축파일내에 html,css 파일이 포합되어 있습니다. css 내용중 var부분은 variable 변수입니다. css변수는 어떠한 기능인지 아래의 사이트에서 간단하게 확인이 가능합니다. https://fresh-mint.tistory.com/entry/css-variable-%EB%B3%80%EC%88%98-%EC%B4%9D-%EC%A0%95%EB%A6%AC 디자인시 유용하게 사용하시길 바랍니다 ^^

위 처럼 개별 체크를 하다가, 모두 체크를 클릭시 일괄 체크가 되며, 다시한번 체크시 일괄 해지되는 간단한 전체선택 jquery 모두체크 폼입니다. 위 처럼 check-all 이라는 class 와 check01 이라는 class 를 이용하여 적용되는 방식입니다. 위 처럼 class 모두체크 항목에는 class 명을 check-all 로 선언하고 개별 체크항목에는 class 명을 check01 로 선언해주어 checkbox 의 name 값이나 id 값에 구애받지 않고 일괄 체크선택, 체크해제 방식을 간단하게 구현할 수 있습니다.

기존의 아주 기본적이고 평범한 체크박스는 이제 버리세요~ 그동안 체크박스의 디자인을 변경하기가 쉽지않았지만 css를 이용하여 체크박스 디자인을 변경해볼 수 있습니다. [ 데모사이트 예시 이미지 ] 파일을 다운받아보시면 아시겠지만 all css는 아니며, css와 html그리고 js. 이 3가지 합작으로 새로운 체크박스 디자인을 만들어 낼 수 있습니다.

* icheck Ver1.0.2 - 체크박스와 라디오박스를 손쉽게 다룰수 있는 플러그인입니다 * License - The MIT License (MIT) * 기능 - 터치지원(아이폰, 안드로이드, 블랙베리, 윈도우폰, 아마존 킨들) - 키보드 접근입력(Tab,Spacebar,down 등) - 체크박스 라디오버튼 사용자정의 * 사용법 - 첨부된 zip 파일을 다운로드 받아 웹루트에 압축을 해제합니다 압축을 해제하면 demo폴더에 index.html 파일을 실행하여 결과물 확인 후 코드를 분석합니다 아래와 같이 기본제공되는 css 와 js 를 상단에 선언후 체크박스와 라디오박스를 체크할때의 변화를 살펴볼 수 있게 아래와 같이 코드를 추가합니다 체크박스 체크와 라디오 박스체크의 컬러를 변경도 가능합니다 사용자..