2011-01-15 5 views
2

몇 개의 이미지 (아마 최대 5 개)를 표시하고 사용자가 클릭하여 선택하도록하고 싶습니다. 내가 시도한 첫 번째 일은 라디오 버튼과 이미지를 라벨 안에 넣는 것입니다.사용자가 n 개의 이미지 중 하나를 선택하도록 jquery/javascript

<input type="radio" name="BackgroundId" id="BackgroundId" value="1" /> 
<label for="BackgroundId"><img src="../../Content/images/thumb_1.jpg" /></label> 

Firefox는 사용자가 이미지를 클릭 할 때 라디오 버튼을 선택하지만 IE는 선택하지 않습니다.

이미지를 클릭 할 수있게 해주는 jquery 플러그인이 있습니까? Fancy-form은 내가 사용할 수있는 것처럼 보이지만 jquery가 아니며 이미 프로젝트에서 jquery를 사용하고 있습니다.

아니면 누군가가 단일 이미지를 선택하는 더 나은 방법을 가르쳐 줄 수 있습니까?

$(function(){ 
    $("label img").click(function(){ 
     var parent = $(this).parent(); 
     $("#" + parent.attr("for")).attr("checked", "checked"); 
    }); 
}); 

답변

2

뭔가 그냥 페이지에이 자바 스크립트를 놓습니다. 나는 그것을 시험했다.

<script language="javascript" type="text/javascript"> 
    $(document).ready(
    function() 
    { 
     var selImg = $("#BackgroundId").next("label").find("img"); 
     selImg.click(
      function() 
      { 
       $("#BackgroundId")[0].click(); 
      }); 

    }); 
</script> 

코드 읽기 : ID를 가지고하는 요소 결국 다음 요소를 가져옵니다 = 'BackgroundId' 이제 각각의 내부 IMG 요소를 찾을 수 있습니다. id가 'BackgroundId'인 모든 요소에 대한 클릭을 시뮬레이트하는 함수를 호출하기 위해 각각의 img가 발견되면 클릭 이벤트를 설정하십시오.

"모든 것"과 "각 태그"를 쓰고 있지만 ID가 'BackgroundId'인 태그가 하나뿐이기 때문에이 모든 것들이 개별적으로 발생합니다.

+0

이것은 내 것보다 더 좋고 일반적인 대답입니다. – bnieland

관련 문제