Un champ, plusieurs boutons

Question

J'essaie de remplacer une liste déroulante par un groupe de plusieurs boutons qui simplifient les choix précédemment affichés dans la liste déroulante. En particulier, les types de boutons que nous utilisons sont des fichiers png graphiques.

Essayé checkboxing et scripts de vérification radio, mais les événements n'ont pas répondu.

Voici un exemple:

<img src="http://201.148.2.247/img/btn/agua.png" name="BotonAGUA" onclick="if(this.checked) 
document.getElementById('radioAgua').checked=true"/> 
             Agua de Hermosillo<input type="radio" name="radioAgua" id="radioAgua" value="AGUAHH"> 
              </span></td> 

Exemple hébergé sur http://201.148.2.247/

Quelqu'un peut-il penser à une meilleure solution pour la mise en œuvre des boutons au lieu d'une liste déroulante?

Answer 1

C'est un gros bouton que vous avez là. Quoi qu'il en soit, vous pouvez utiliser le bouton radio/cases à cocher avec l'étiquette <label> et le style de l'étiquette pour ressembler à un bouton. Pas de javascript requis.

http://www.w3schools.com/tags/tag_label.asp

Answer 2

La condition que vous avez sur l'événement 'onclick' devrait renvoyer à l'entrée, pas l'image (this dans votre cas est l'image).

Answer 3

Qu'en est-ce:

<script type="text/javascript"> 
    function choose(id, index) 
    { 
    document.getElementById(id).selectedIndex = index; 
    } 
</script> 

<button onclick="choose('choicebox', 0);">choice 1</button> 
<button onclick="choose('choicebox', 1);">choice 2</button> 
<button onclick="choose('choicebox', 2);">choice 3</button> 

<select id="choicebox" name="choicebox" style="visibility:hidden;"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select>