그림과 같은 라디오 버튼

Question

라디오 버튼을 그림으로 변경하는 데 도움이 필요합니다. 나는이 질문에 다른 포럼이 있다는 것을 알고 있지만, 대부분은 라디오 버튼을 라디오 버튼처럼 보이지만 어쩌면 더 세련된 이미지로 바꾸는 데 집중합니다. 내가 뭘하려고하는지 사용자가 내가 그/그녀의 4 사진을주고 싶어하고 그들 중 하나를 자신의 프로필 사진으로 선택해야 할 때입니다. 그들은 그림 중 하나를 클릭하면이 같은 강조 표시를하고자 -

을 나는 다음과 같은 코드를 가지고 지금

<table> 
    <tr><td style="text-align:right;">First Name:</td><td><input type="text" name="first_name" maxlength="20"></td></tr> 
    <tr><td style="text-align:right;">Last Name:</td><td><input type="text" name="last_name" maxlength="20"></td></tr> 
    <tr><td style="text-align:right;">Zipcode:</td><td><input type="text" name="zipcode" maxlength="5"></td></tr> 
    <tr><td style="text-align:right;">Email (used for log in):</td><td><input type="text" name="email"></td></tr> 
    <tr><td style="text-align:right;">Password:</td><td><input type="password" name="password"></td></tr> 
    <tr><td style="text-align:right;">Re-enter Password:</td><td><input type="password" name="password_reentry"></td></tr> 
    <tr><td style="text-align:right;">Admin:</td><td><input type="checkbox" name="admin" value="1"></td></tr> 
    <tr><td><img src="/avinash/pictures/maleprofilepicture1.jpg" height="40" width="40"></td><td><img src="/avinash/pictures/maleprofilepicture2.jpg" height="40" width="40"></td><td><img src="/avinash/pictures/femaleprofilepicture1.jpg" height="40" width="40"></td><td><img src="/avinash/pictures/femaleprofilepicture2.jpg" height="40" width="40"></td></tr> 
</table> 

나는 맨 아래에있는 이미지를 변경하려면

라디오 버튼에

아무도 도와 줄 수있는 방법. 나는 많은 프로그래밍 경험이 없기 때문에 시작하는 코드가 정말 멋질 것입니다.

도움을 주시면 감사하겠습니다.

Answer 1

HTML의 작은 조각을 추가 할 필요가이 페이지에 따라 수 : 그냥 라디오 버튼과 관련을 이어서

<input type="radio" name="radiogroup" id="radio1" checked/> 
<label for="radio1">This is text associated with radio1. It could be a <img src="" alt="picture"/> as well</label> 

<input type="radio" name="radiogroup" id="radio2"/> 
<label for="radio2">This is text associated with radio2. It could be a <img src="" alt="picture"/> as well</label> 

작은 PIEC : 라벨 (for 속성은 라디오 버튼의 ID를 참조) e를 사용하여 레이블을 숨기고 스타일을 레이블에 적용합니다. 이렇게하면 라디오 버튼을 모두 숨기고 두 개의 내용을 클릭 할 수 있고 라디오 버튼 인 것처럼 전환 할 수 있습니다. 레이블에는 텍스트, 그림 또는 배경 이미지가 포함될 수 있습니다.

input { 
    display: none; 
} 

input[type="radio"]:checked + label { 
    display: block; 
    border: 1px solid blue; 
} 

자바 스크립트가 필요하지 않습니다.

그래서 트릭은 다음과 같습니다

• 를 사용하여 실제 라디오 버튼. 그들은이 클릭 토글 동작을 내장하고 있습니다.
• 레이블을 사용하고 적절한 for 속성을 사용하십시오. 그러면 라디오 버튼의 확장이됩니다. 실제 라디오 버튼을 숨길 수 있지만 여전히 행동을 유지합니다.

http://jsfiddle.net/qUJJ3/

Answer 2

내가 대신 jQuery를 사용하고이 데모에서는

http://jsfiddle.net/KwN74/9/

을보십시오. 나는 그것을 가능한 한 가장 간단한 방법으로 만들려고 노력한다. 아직 jQuery를에 익숙하지 않은 경우, 당신은

http://jquery.com/download/

지금, 당신은 단지이 참조

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 

Answer 3

내가 JS 몰라하지만 난 그것에 대해 이런 식으로 (OOP)을 갈 것입니다 : 내가, 변수 INT picNum을 만들 것

. 사용자가 첫 번째 이미지 (예 : picNum = 1)를 선택하면 click 이벤트에 표시됩니다.차종 등 두 번째

switch (picNum) 
{ 
    case 1: 
     profilePic = pic1; 
    break; 
}