jquery

Question

을 사용하여 원형 체크 박스 만들기 특정 내용의 xml 읽기를 사용하여 체크 박스와 설명을 추가합니다. 그러나 문제는 라디오 버튼과 같은 확인란의 시각적 표시가 필요하지만 확인란처럼 작동해야한다는 것입니다. 그것을 체크 해제하십시오. 또한 체크 박스의 틱의 공간에서, 점으로 표시되어야합니다 (가능하다면 어떤 색상이든 상관 없습니다).

$(xml).find("Layer[Name='"+layerName+"']").find("IndustryComponent").each(function() 
      { 
       var layerDesciption= $(this).attr('Name'); 
       if($(this).is(':empty')) 
       { 
        $(".InsideLayerContainer").append("<input type='checkbox' name='' value='' disabled='true'><label>"+layerDesciption+"</label><br/>"); 
       } 
       else 
       { 
        $(".InsideLayerContainer").append("<input type='checkbox' name='' value=''><label>"+layerDesciption+"</label><br/>"); 
       } 
      }); 

Answer 1

정말 권하고 싶지 않다, 그러나 당신은 항상 라디오를 만들 수 있습니다 버튼이 마치 체크 박스처럼 작동합니다.

$('input[type="radio"]').on('click', function() { 
    this.checked = !$(this).data('checked') 
    $(this).data('checked', !$(this).data('checked')); 
}); 

FIDDLE

Answer 2

이미지 오버레이를 사용해야합니다.

두 개의 이미지를 선택하지 않은보기 다른 하나는 눈에 보이는 이미지를 숨겨진 체크 박스를 업데이트하고 변경 후 클릭 값을 기준으로 확인 뷰를 만들기도

Answer 3

UPDATE

확인이 DEMO http://jsfiddle.net/yeyene/Xqr4n/2/

HTML

<input class="myCheck" type="checkbox" name="vehicle" value="Bike">check 1<br /> 
<input class="myCheck" type="checkbox" name="vehicle" value="Bike">check 2<br /> 
<input class="myCheck" type="checkbox" name="vehicle" value="Bike">check 3<br /> 

JQUERY

$('input[type=checkbox]').each(function(){ 
    $(this).wrap('<span class="circle">'); 
}); 

$('.circle').on("click", function(){ 
    if($(this).css("background-color") == 'rgb(223, 223, 223)') { 
     $(this).find('.myCheck').prop('checked', true); 
     $(this).css({'background-color':'rgb(0, 64, 212)'}); 
    } 
    else { 
     $(this).find('.myCheck').prop('checked', false); 
     $(this).css({'background-color':'rgb(223, 223, 223)'}); 
    } 
});