jQuery는 사용자 정의 체크박스와 라디오 styles_jquery를 구현합니다.

1, 원인

최근 회사에서 맞춤형 라디오 스타일을 구현해야 하는데 보통 기본 스타일을 사용하는데, 정말 해결책이 떠오르지 않아서 검색을 시작했는데, 드디어 완벽하게 할 수 있는 좋은 솔루션을 발견했습니다. 우리의 문제를 해결하십시오.

2, 원칙

구조물을 작성할 때 라디오나 체크박스가 라벨과 함께 사용된다는 것은 누구나 알고 있습니다. 라벨의 for 속성 값이 입력의 id 값과 같을 때 여기서 라벨을 클릭하여 입력을 선택하세요. , 레이블은 레이블을 덮어쓰는 데 사용됩니다. 입력 기본 스타일은 레이블에 배경 이미지(미화된 체크박스 또는 라디오)를 추가하는 것입니다. 즉, 클릭 프로세스 중에는 기본 입력을 볼 수 없습니다(z-index 설정:- 1 입력), 라벨을 클릭하고 다양한 이벤트를 통해 다양한 배경 이미지를 로드합니다. (여기서는 배경 이미지 변경 위치입니다)

3. 체크박스나 라디오를 아름답게 하기 위해 기본 스타일을 설정하세요

(1) 페이지 구조

<form class="form" method="post">
  <fieldset>
    <legend>Which genres do you like&#63;</legend>
    <input type="checkbox" value="action" id="check-1" name="genre"><label for="check-1" class="">Action / Adventure</label>
    <input type="checkbox" value="comedy" id="check-2" name="genre"><label for="check-2" class="">Comedy</label>
    <input type="checkbox" value="epic" id="check-3" name="genre"><label for="check-3" class="">Epic / Historical</label>
    <input type="checkbox" value="science" id="check-4" name="genre"><label for="check-4" class="">Science Fiction</label>
    <input type="checkbox" value="romance" id="check-5" name="genre"><label for="check-5" class="">Romance</label>
    <input type="checkbox" value="western" id="check-6" name="genre"><label for="check-6" class="">Western</label>
  </fieldset> 
  <fieldset>
    <legend>Caddyshack is the greatest movie of all time, right&#63;</legend>
    <input type="radio" value="1" id="radio-1" name="opinions"><label for="radio-1" class="">Totally</label>
    <input type="radio" value="1" id="radio-2" name="opinions"><label for="radio-2" class="">You must be kidding</label>
    <input type="radio" value="1" id="radio-3" name="opinions"><label for="radio-3" class="">What's Caddyshack&#63;</label>
  </fieldset>
</form>

(2) jquery 코드(jquery 라이브러리가 도입되어야 함)

jQuery.fn.customInput = function(){
  $(this).each(function(i){
    if($(this).is('[type=checkbox],[type=radio]')){
      var input = $(this);
      //get the associated label using the input's id
      var label = $('label[for='+input.attr('id')+']');
      //get type,for classname suffix
      var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';
      //wrap the input + label in a div
      $('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input,label);
      //find all inputs in this set using the shared name attribute
      var allInputs = $('input[name='+input.attr('name')+']');
      //necessary for browsers that don't support the :hover pseudo class on labels
      label.hover(function(){
        $(this).addClass('hover');
        if(inputType == 'checkbox' && input.is(':checked')) {
          $(this).addClass('checkedHover');
        }
      },function(){
        $(this).removeClass('hover checkedHover');
      });
       
      //bind custom event, trigger it, bind click,focus,blur events
      input.bind('updateState',function(){
        if(input.is(':checked')){
          if(input.is(':radio')){
            allInputs.each(function(){
              $('label[for='+$(this).attr('id')+']').removeClass('checked');
            });
          };
          label.addClass('checked');
        } else {
          label.removeClass('checked checkedHover checkedFocus');
        }
      })
      .trigger('updateState')
      .click(function(){
        $(this).trigger('updateState');
      })
      .focus(function(){
        label.addClass('focus');
        if(inputType == 'checkbox' && input.is(':checked')) {
          $(this).addClass('checkedFocus');
        }
      })
      .blur(function(){
        label.removeClass('focus checkedFocus');
      });        
    }
  });
}

jquery 라이브러리와 위 코드를 소개한 후, 다음 코드를 실행하면 됩니다

$('input').customInput();

(3) 생성된 외부 div

코드 구조가 레이블과 입력이 쌍으로 작성되는 경우 그림과 같이 div가 외부에 생성됩니다.

(4) 사용자 정의 기본 스타일 설정

다음과 같이 사진을 준비하세요.

대부분의 입력 옵션이 중앙에 있고 이를 시뮬레이션하기 위해 라벨의 배경 이미지를 사용하기 때문에 상단이 상단이 아닌 특정 거리에 있는 이유가 무엇인지 물으실 수 있습니다. 입력 옵션 중앙에 표시됩니다. 즉, ico 작은 아이콘은 수직으로 배열되어야 하며 중앙에 표시되도록 하려면 일정 거리를 두어야 합니다.

/* wrapper divs */
      .custom-checkbox,
      .custom-radio {
        position: relative;
        display: inline-block;
      }
      /* input, label positioning */
      .custom-checkbox input,
      .custom-radio input {
        position: absolute;
        left: 2px;
        top: 3px;
        margin: 0;
        z-index: -1;
      }
      .custom-checkbox label,
      .custom-radio label {
        display: block;
        position: relative;
        z-index: 1;
        font-size: 1.3em;
        padding-right: 1em;
        line-height: 1;
        padding: .5em 0 .5em 30px;
        margin: 0 0 .3em;
        cursor: pointer;
      }

이는 가장 바깥쪽에 있는 설정입니다. 물론 직접 수정할 수도 있습니다.

/* ==默认状态效果== */
      .custom-checkbox label { 
        background: url(images/checkbox.gif) no-repeat; 
      }
      .custom-radio label { 
        background: url(images/button-radio.png) no-repeat; 
      }
      .custom-checkbox label, 
      .custom-radio label {
        background-position: 0px 0px;
      }

/*==鼠标悬停和得到焦点状态==*/
      .custom-checkbox label.hover,
      .custom-checkbox label.focus,
      .custom-radio label.hover,
      .custom-radio label.focus {
        /*background-position: -10px -114px;*/
      }
      
      /*==选中状态==*/
      .custom-checkbox label.checked,
      .custom-radio label.checked {
        background-position: 0px -47px;
      }
      .custom-checkbox label.checkedHover,
      .custom-checkbox label.checkedFocus {
        /*background-position: -10px -314px;*/
      }
      .custom-checkbox label.focus,
      .custom-radio label.focus {
        outline: 1px dotted #ccc;
      }

끝: 한마디로 문제를 완벽하게 해결했으니 확인하실 수 있도록 스크린샷을 보내드리겠습니다

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.