기본 라디오를 이미지로 바꿉니다.

여기 두 가지를 달성하려고합니다. 1 : 나는 라디오 버튼을 클릭하면 콘텐츠를 보여주기 위해 노력하고 2 : 나는 이미지의 기본 라디오 버튼을 대체하기 위해 노력하고기본 라디오를 이미지로 바꿉니다.

나는 완전히 라디오의 아이디어를 제거하고 단지 이미지를 클릭 쇼를 할 수 있었다

하지만, 궁극적 인 작업은 사용자 입력을 포착하고 이메일을 보내는 것입니다. 나는이 부분에서 그 부분을 배제하고있다. 내 솔루션은 크롬에서 잘 작동하지만 Internet Explorer 8에서는 콘텐츠를 표시 할 수 없습니다. IE 9가 여기

작동 나의 현재의 시도 :

자바 스크립트 :

$(function(){ 

    var options = $('#options').find('input'); 
    options.click(function(){ 
     var id = "opt" + $(this).val(); 
     $(".optDivs").hide(); 
     $("#" + id).show(); 

    }); 

    var selections = $('#selections').find('input'); 

    selections.click(function(){ 
     var id = "opt" + $(this).val(); 
     $(".slctDivs").hide(); 
     $("#" + id).show(); 

    }); 

    });

HTML :

<html><head>  
<style> 
    #one{ 
     position:absolute; 
     left:-99999999; 
    } 
</style> 
</head> 
<body> 

    <div id="options"> 
     <div class="opt1"> 
      <input type="radio" name="primary" id="one" value="1"> 
      <label for="one"><img width="50px" src="http://gfxlovers.com/smilies/imgs/smiling/smiling025_2.gif"></label> 
     </div> 
     <div class="opt2"><input type="radio" name="primary" value="2"> Option 1</div> 
     <div class="opt3"><input type="radio" name="primary" value="3"> Option 1</div> 
    </div> 

    <div id="opt1" class="optDivs" style="display:none;">content option 1</div> 
    <div id="opt2" class="optDivs" style="display:none;">content option 2</div> 
    <div id="opt3" class="optDivs" style="display:none;">content option 3</div> 


    <div id="selections"> 
     <div class="opt4"><input type="radio" name="secondary" value="4"> Option 2</div> 
     <div class="opt5"><input type="radio" name="secondary" value="5"> Option 2</div> 
     <div class="opt6"><input type="radio" name="secondary" value="6"> Option 2</div> 
    </div> 

    <div id="opt4" class="slctDivs" style="display:none;">content option 5</div> 
    <div id="opt5" class="slctDivs" style="display:none;">content option 6</div> 
    <div id="opt6" class="slctDivs" style="display:none;">content option 7</div> 



<div id="chrome_hitahintpanel" style="opacity: 0; display: none;"><input id="chrome_hitahintinput" type="text"></div><div id="chrome_hintswindow"></div><div id="chrome_linksearchpanel" style="opacity: 0; display: none;"><input id="chrome_linksearchinput" type="text"></div></body></html>

당신은 그것을 호스팅 및 here 작업 볼 수 있습니다.

내가 여기에 무엇을 놓치고 있는지 알 수 있습니까?

출처

2013-03-31 soum

대신 할 수 있겠습니까? – Mooseman

네, 저도 그렇게하겠습니다. – soum

이것은 바이올렛입니다. http://jsfiddle.net/sghoush1/44dfv/ – soum

CSS로 라디오 요소를 숨기고 대신 이미지를 표시해야합니다. 그런 다음 jquery (또는 유사)의 이미지를 캡처하여 이미지 중 하나가 클릭되었는지 확인해야합니다. 일치하는 경우 : 해당 라디오 요소에 확인 된 속성을 추가하십시오.

출처

2013-03-31 17:15:29 hurrtz

당신은 soum가 그것을 어떻게 완성시킬 수 있는지 설명해 주시겠습니까? 가급적 코드? –

예, 여기 있습니다 : http://jsfiddle.net/KbTCx/ 단순성을 이유로 이미지 대신 색이 지정된 div를 찍었지만 이해할 수 있습니다.) – hurrtz

@ hurrtz- thanks. 나는 개념을 얻는다. 나는 이것을 내가하려는 일과 결합시킬 수있다. – soum

기본 라디오를 이미지로 바꿉니다.

답변

관련 문제