레이블없이 chechbox 클릭 가능한 영역을 확장

Question

내 코드는 다음과 같습니다

<div class="hovereffect"> 
    <img class="img-responsive" src="/some-image" alt=""> 
    <input type="checkbox" class="img-checkbox"> 
</div> 

.hovereffect { 
    width: 100%; 
    height: 100%; 
    margin-bottom: 20px; 
    float: left; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    cursor: default; 
} 

.hovereffect .img-checkbox{ 
    position: absolute; 
    width: 18px; 
    height: 18px; 
    top: 3px; 
    right: 5px; 
    cursor: pointer; 
} 

그래서이 이미지를 통해 우측 상단 모서리에있는 체크 박스를하고 클릭을 확장하기에 있습니다 싶습니다 더 나은 사용자 경험을위한 전체 이미지.

이 확인란에는 라벨이 없으므로 라벨없이 목표를 달성하고 싶습니다.

필자는 크롬으로 작업했지만 실제로 파이어 폭스와는 관계없는 :: after 요소를 사용하여 트릭을 시도했지만 이미지의 전체 영역까지 확장 할 수있는 클릭 가능 영역을 만들 수는 없었습니다.

Answer 1

Javascript/jQuery를 사용할 수 있습니까?

당신은 (예 : 을 img1, IMG2은 img3) 한 모든 이미지에 독특한 id을 할당하여 시작할 수 있습니다

모든 체크 박스는 이미지에 관련된 (예 : 을 img1 - 체크 박스) 코드를 사용할 수 있습니다 그 때는 아래 : 같은

$('#img1').click( $('#img1-checkbox').attr('checked', true); );

또는 뭔가.

Answer 2

이것은 매우 오랜 시간 이래 problem되었습니다. 은으로 순수 CSS로 목표를 달성 할 수 없습니다. 그것을 얻는 유일한 방법은 label 또는 jquery/javascript 또는 :after 가상 클래스를 사용하는 것입니다. 당신이 체크 박스의 크기를 확장합니다

,이 시도 :이 확인란 필드의 클릭 가능한 영역을 증가

.hovereffect input[type=checkbox] 
{ 
    width:100px !important; //adjust as per need 
    height:100px !important; //adjust as per need 
} 

. 당신이 checkbox이 투명하고 뒤에 이미지를 표시하려는 경우, 당신은 라벨을 사용하고 설정해야합니다 Working Link

하지만, 투명 배경 색상입니다.

누군가 작업 코드에 문제가 있다는 것을 알기를 기다리고 있습니다.