체크박스 라벨 정렬 - chekeubagseu label jeonglyeol

Question

다른 요소에 label for 효과 주기(체크박스 동작) 본문

꼬북꼬북 꼬부기 2021. 4. 1. 14:25

목차 Show

다른 요소에 label for 효과 주기(체크박스 동작) 본문
기본코드
형태 변경
새로고침
많이 사용하는 체크박스 형식

클릭하기에 너무 작은 체크박스

체크

그래서 보통 label로 한번 감싸 줘, 보다 클릭하기 쉽게 해주는데요

체크

div나 tr, td를 클릭했을때도 체크박스가 체크되면 더욱 편해질거같아 만들어봤습니다

@@@@@@##########1$$$$$$$$$$%%%%%%%%2^^^^^^^^&&&&&&&&3***********+++++++++

$(document).on('click','table > tbody > tr > td:nth-child(1), th:nth-child(1)',function(e){
    if($(e.target).attr('type') == 'checkbox'){ return true; }// 이 라인이 중요★★★★★
    var radio = $(this).find('input[type=checkbox]');
    var isChecked = radio.prop('checked');
    radio.prop('checked', !isChecked)
});

중요하다고 표시한 if($(e.target).attr('type') == 'checkbox'){ return true; }

이 구문은

e.target >> 이벤트 타겟을 가져와
.attr('type') >> 해당 요소의 type을 조회하고
해당 타입이 checkbox면 return true;로 continue 효과를 주는 함수입니다.

return false는 break; 와 동일한 효과를 가지고

return true;는 continue와 동일한 효과를 가지고있습니다.

저 구문이 없으면 td, th 클릭 시엔 정상 동작하지만,

checkbox 클릭 시 checkbox의 기본 효과인 클릭 시체크 되는 기능과

위 스크립트가 충돌이 발생하여 값이 변하지않게 됩니다.

이상으로 개발자느님들 잘 쓰시길 바라며 글 마무리하겠습니다

감사합니다.

체크 박스는 하나 이상의 항목을 선택 할 수 있는 기능을 제공한다.

기본코드

체크 박스를 세로로 정렬 하기 위해서는

으로 체크 박스를 감싸 주어야 한다. 또한 기본으로 체크된 효과를 나타내고 싶을 때는 Tag에 checked="checked"를 추가 한다.

취미 선택 :

취미 선택 :
음악감상
영화감상

형태 변경

체크 박스는 가로 정렬도 가능하며 그룹에서 하나를 선택 할 수 있다. 가로 형으로 그룹화할 때는 기본코드의

Tag에 data-type="horizontal"을 추가 한다.

취미 선택 :
음악감상
영화감상

새로고침

Check Box는 새로고침 기능이 제공된다. 자바 스크립트에 아래 코드를 추가 한 후 이벤트로 연결 해주면 체크된 박스가 해제된다.

refresh

$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");

input으로 체크박스를 만들고, label과 연결해주면

label을 클릭할때마다 체크박스를 활성화 할 수 있다.

{* html파일 *}
{* input에서 type을 지정해 checkbox를 만들고, label과 연결하기 위한 id를 만들어준다. *}
<input type="checkbox" id="chkBox"/>

{* label을 만들어주고, 연결하고 싶은 input의 id를 for요소에 적어준다. *}
<label for="chkBox">라벨 내용~</label>

많이 사용하는 체크박스 형식

{* css파일 *}
input {
  {* 원래 input 숨겨주기 *}
  display: none;
}

label {
  {* 라벨 텍스트 줄바꿈 열맞추기 *}
  display: block;
}

{* 사용자에게 보여줄 가상체크박스 만들기 *}
label::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid gray;
}

{* input이 체크된 상태이면, 가상체크박스의 스타일을 변경하기 *}
input:checked + label::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: blue;
}

반응형

게시글 관리

구독하기EVEYTHING

저작자표시 동일조건

라디오/체크박스와 텍스트의 정렬하기 방법을 소개합니다.
크로스브라우징이 가장 어려운 부분이고, UI개발자가 가장 짜증나고 싫어하는 작업 중에 하나가 아닐까 싶습니다.(그죠? 내말 맞죠?)
그리고 작업자마다 방법이 너무 다양한 부분이기도 합니다. (라디오/체크박스에 float:left / position:relative,absolute / margin 등...)
그래서 고민하고, 생각한 결과 아래와 같은 방법이 좋을 것 같아서 여러분께 공유합니다.
여러 방법 중에 개인적으로는 최고의 방법이 아닐까 싶은데요.(지금까지는..)

참고로 브라우저에 보여지는 라디오/체크박스 사이즈는 아래와 같습니다.
WinXP : 체크박스 13x13, 라디오 13x13

Win7 : 체크박스 13x13, 라디오 12x12

아래 마크업은 폰트 12px 사이즈에 돋움, 굴림에서 테스트하였습니다.

HTML
방법1. 라디오/체크박스와 텍스트 정렬
방법2. 라디오/체크박스와 텍스트 정렬

CSS
input{width:13px;height:13px;vertical-align:text-top}
label{vertical-align:-1px}
label input{margin-top:-1px}

위 방법에서 큰 단점이 하나 있습니다.
input과 label 태그사이에 여백이 없을 경우 상황에 따라 ie8에서 라디오/체크박스와 텍스트 정렬이 어긋나 버립니다.
이 이슈는 ie8 브라우저의 vertical-align:text-top 에 대한 버그입이다.(예전에 참고 url을 발견하였는데 찾기가 힘들다. 찾으면 url 공유하겠음...)
이 이슈를 제외하고는 os/브라우저 상황별 맞춤 마크업이라고 할 수 있겠습니다.

728x90

반응형

SMALL

1. checkbox & label 높이 조절하기

checkbox top값 +1.5px 또는 label top값 - 1.5px

<head>
  <style type="text/css">
  .login_append input[type="checkbox"]{
    position: relative;
    top: 1.5px;
  }
  </style>
</head>

<body>
  <div class="login_append">
    <input type="checkbox" id="keepLogin" class="inp_radio" name="keepLogin">
    <label for="keepLogin">로그인 상태 유지</label>
  </div>
</body>

728x90

반응형

LIST

게시글 관리

구독하기어린왕자

'IT > CSS' 카테고리의 다른 글

[폰트] @font-face{} 적용하기 (0)2020.09.29[가상 클래스] first-child, first-of-type - 요소 선택하기 (0)2020.09.26[정렬] css로 요소 화면 가운데 위치시키기 (2)2020.09.26[단위] 7가지(rem, vh, vw, vmin, vmax, ex, ch) (0)2020.09.25

체크박스 가로 정렬 체크박스 세로 정렬 Checkbox 정렬 Checkbox label Checkbox 가운데 정렬 css 체크박스 라벨 체크박스 줄바꿈