jQuery 관련 팁을 공유하는 곳입니다. [가입을 하셔야 다운로드가 가능합니다.]
  • 웹미니 한줄 전광판 영역 입니다.
글 수 20
미리보기 : https://www.webmini.net/img_checkbox_radio 

html

 

/* checkbox */
<input type="checkbox" name="_check" id="_check1" class="id_check"><label for="_check1" class="type-checkbox">체크1</label>
<input type="checkbox" name="_check" id="_check2" class="id_check"><label for="_check2" class="type-checkbox">체크2</label>
<input type="checkbox" name="_check" id="_check3" class="id_check" disabled="disabled"><label for="_check3" class="type-checkbox disabled">체크(선택불가)</label>

/* radio */
<input type="radio" name="_radio" id="_radio1" class="id_radio"><label for="_radio1" class="type-radio">라디오1</label>
<input type="radio" name="_radio" id="_radio2" class="id_radio"><label for="_radio2" class="type-radio">라디오2</label>
<input type="radio" name="_radio" id="_radio3" class="id_radio" disabled="disabled"><label for="_radio3" class="type-radio disabled">라디오(선택불가)</label>

 

input에 class명과 label의 class명을 정확히 작성해 주셔야 합니다. 변경시 스크립트도 수정을 해줘야 합니다.

 

css

 

/* checkbox */
input.id_check{position:absolute;left:-3000em}
label.type-checkbox{display:inline-block;height:20px;margin-right:7px;padding-left:27px;font-size:13px;color:#666;vertical-align:middle;background:url(/images/study/jquery/img_checkbox_radio/img_checkbox.png) no-repeat;line-height:20px}
label.type-checkbox.checked{background:url(/images/study/jquery/img_checkbox_radio/img_checkbox_checked.png) no-repeat}
label.type-checkbox.disabled{background:url(/images/study/jquery/img_checkbox_radio/img_checkbox_disabled.png) no-repeat}

/* radio */
input.id_radio{position:absolute;left:-3000em}
label.type-radio{display:inline-block;height:20px;margin-right:7px;padding-left:27px;font-size:13px;color:#666;vertical-align:middle;background:url(/images/study/jquery/img_checkbox_radio/img_radio.png) no-repeat;line-height:20px}
label.type-radio.checked{background:url(/images/study/jquery/img_checkbox_radio/img_radio_checked.png) no-repeat}
label.type-radio.disabled{background:url(/images/study/jquery/img_checkbox_radio/img_radio_disabled.png) no-repeat}

 

script

 

$(document).ready(function(){
$.fn.customizeCRInput = function(options) {
var options = $.extend({
checked_class : "checked"
}, options);
return this.each(function(){
var input = $(this);
input.on("change",function(){
var is_checked = input.is(":checked");
var type = input.attr("type");
var id = input.attr("id");
var label = $("label[for="+id+"]");
if (type == "checkbox") {
if (input.is(":checked")) {
label.addClass(options.checked_class);
} else {
label.removeClass(options.checked_class);
}
} else if (type == "radio") {
$("input[name="+input.attr("name")+"]").each(function(idx){
$("label[for="+$(this).attr("id")+"]").removeClass(options.checked_class);
});
label.addClass(options.checked_class);
}
});
});
};
$("input[type=checkbox].id_check").customizeCRInput(); // 체크박스 실행 스크립트
$("input[type=radio].id_radio").customizeCRInput(); // 라디오 버튼 실행 스크립트
});

 

선택 됐을때의 색상, 폰트크기는 원하는데로 수정하시면 됩니다.

태그
profile 글쓴이 빽짱구

단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨

엮인글 :
https://www.webmini.net/jquery/634594/1c5/trackback
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

첫번째 댓글을 남겨주세요!

List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수
20 가로사이즈 구하기 title: 새싹빽짱구 2018-11-06   9
19 jquery - 이미지 체크박스, 라디오 버튼 title: 새싹빽짱구 2018-10-16   23
18 본문글 집중모드 효과 file [1] title: 새싹빽짱구 2018-10-09   107
17 스크롤 고정형 퀵배너 title: 새싹빽짱구 2018-09-07   37
16 버튼 클릭시 원하는 곳으로 부드럽게 이동 title: 새싹빽짱구 2018-09-07   41
15 jquery 토글 기능 title: 새싹빽짱구 2018-09-06   20
14 해당 영역 높이값 자동으로 가져오기 title: 새싹빽짱구 2016-04-27   155
13 해상도별로 CSS호출하기 title: 새싹빽짱구 2015-10-14   512
12 iscroll 사용시 동적일때 문제 title: 새싹빽짱구 2014-02-20   3529
11 [스크랩] jQuery 팁 & 튜토리얼 title: 새싹사뎅이 2014-01-14   2456
10 제이쿼리 모바일(jquery mobile) 샘플사이트 및 데모 title: 새싹빽짱구 2013-01-29 1 6828
9 버튼이나 텍스트 링크 클릭시 원하는곳으로 부드럽게 이동하기 file [1] title: 새싹빽짱구 2012-10-22 2 5167
8 제이쿼리 및 CSS3,HTML5 관련 튜토리얼입니다. title: [ani]방울UI 2012-10-11   3258
7 jQuery 로 레이어 드래그 하기 title: 새싹빽짱구 2012-09-07   3364
6 jQuery로 파일첨부버튼 이미지로 꾸미기 file title: 새싹빽짱구 2012-09-07   4424
5 jQuery 제이쿼리로 셀렉트 박스 꾸미기 file title: 새싹빽짱구 2012-09-06 1 5522
4 jQuery 부드러운 위로가기 탑(top) 버튼 효과 file [1] title: 새싹빽짱구 2012-08-30   6573
3 jQuery 종류별 효과 모음 title: 새싹빽짱구 2012-03-02 1 7307
2 JQUERY js파일 불러오기~ [2] 늘푸른 2010-07-25 1 7049
1 JQuery 시작하기~ 늘푸른 2010-07-24 1 6541