vérifier html case à cocher à l'aide d'un bouton

J'ai du mal à trouver une solution à ce n'importe où sur Google, peut-être que je suis à la recherche incorrectement, mais pensé que je pourrais venir et de poser la jamais confiance des membres de StackOverflow.

Je suis désireux d'utiliser un bouton html de cocher une case à cocher html. Il y a une raison je ne veux pas utiliser la case à cocher sera purement pour des raisons d'accessibilité en raison de l'application que je suis en développement sera sur un terminal et utilisé que par l'intermédiaire d'un écran tactile de sorte HTML case est trop petite.

Le seul problème est que la liste de case à cocher est dynamique car il est rempli à l'aide d'une requête SQL. De toute évidence cependant, je peux faire de même pour la création des boutons HTML.

Im deviner qu'il aura besoin de JavaScript (dont je suis parfaitement heureux de l'aide, maintenant que j'ai trouver un grand nombre de fonctionnalités dont j'ai besoin dans cette application a besoin de JavaScript) pour faire de cette fonctionnalité.

Donc pour clarifier les choses: je veux cliquer sur un bouton, dire qu'il a une valeur de "la Pourriture des Nageoires" et vérifie que la case à cocher avec la valeur "la Pourriture des Nageoires". Et puis si j'ai cliqué sur un autre bouton, dire qu'il a une valeur de "Ich", puis il vérifie également la case à cocher avec la valeur "Ich"

OriginalL'auteur Stefan | 2011-01-09

  1. 11

    Pendant que vous peut utiliser un bouton et JavaScript pour cela, pourrais-je vous suggérer une approche beaucoup plus simple? Il suffit d'utiliser un <label> conçu juste pour cela, et un style comme un bouton, par exemple:

    <input type="checkbox" id="finRot" name="something" value="Fin Rot">
<label for="finRot">Some text here, could be "Fin Rot"</label>

    ou (si vous ne souhaitez pas utiliser id sur checkbox et for sur label):

    <label>
    <input type="checkbox" name="something" value="Fin Rot">
    Some text here, could be "Fin Rot"
</label>

    ....puis avec CSS, vous pouvez masquer la case à cocher si nécessaire, mais ou sont cliquables pour basculer la case à cocher.

    Vous pouvez tester une démo ici, montre aussi des bouton-ish CSS sur l'étiquette, le cas échéant.

    +1 d'autant mieux que la JS solution à base j'écrivais lorsque vous avez publié cette...
    non, c'est le for attribut morceau...fonctionne depuis Netscape 🙂
    il fonctionne pour moi (Chrome 8.x, Ubuntu 10.10) tant que la valeur de l'être "pour" l'attribut est exactement le même que le id de la input élément.
    Craver, @David Thomas: Oh je viens de copier du Pseudo code, et il était encore id"finRot"... jamais l'esprit, alors 😉
    faute de frappe! J'ai pensé que je l'ai pris vite :'(

    OriginalL'auteur Nick Craver

  2. 2

    Cet exemple utilise un bouton pour activer la case à cocher activé/désactivé.

    http://jsfiddle.net/DnEL3/

    <input type="checkbox" id="finRot" name="something" value="Fin Rot">
<button onclick="document.getElementById('finRot').checked=!document.getElementById('finRot').checked;">Fin Rot</button>

    OriginalL'auteur Dutchie432

  3. 2

    Que diriez-vous une solution HTML. 

     <p><input type="checkbox"
 value="Another check box"
 name="cboxwithlabel" id="idbox"><label
 for="idbox">Another
 checkbox</label></p>

    <label> Crée de l'étiquette de la case à cocher ou des boutons radio.

    Ou, en effet, tout autre input (et textarea) élément... =)

    OriginalL'auteur Vishwanath