Checkbox avec des signes différents

Sujet résolu

23 mars 2017 à 14:21:59

Bonjour,

dans un formulaire j'aimerai laissé le choix aux personnes de cocher une case et une seule case pour dire "plus" ou "moins". Il me semblait avoir déjà vu cela, mais en cherchant....et bien je n'ai pas retrouvé ! Donc est ce possible ?

Plus de précision : grosso modo au lieu d'avoir une checkbox qui m'affiche le V de valider j'aimerai que ma checkbox me fasse plutôt : un clic = un plus et second clic = un moins, un troisième clic = retour à l'état initial.

Est ce possible ? Et si oui, comment récupérer les valeurs ?

Si non, une autre solution pour avoir un clic = qqchose et donc une valeur en particulier. Et un second clic = autre chose une autre valeur. Et un troisième clic = retour à l'état initial; ?

Merci pour votre aide.

GannoN

23 mars 2017 à 14:33:47

Salut,

Au début je pensez que ta solution était les radiobutton, mais j'en suis pas sûr.
Le but, c'est de clic sur un bouton et que cela change la valeur d'un input ?

zazzou

24 mars 2017 à 14:40:23

Hi,

oui le but c'est :

un clic sur un élément A = une valeur dans un input
un second clic sur ce même élément A = une autre valeur dans un input (ou bien un input différent)

Pour que je puisse ensuite récupérer les valeurs et les enregistrer dans ma base.

Merci pour vos réponses :-)

wimbo

24 mars 2017 à 15:21:18

salut

le sujet m 'intéresser du coup je me suis permis de chercher un peu

j'ai trouver une solution pour avoir une checkbox à trois valeurs , (il faut jquery)

la valeur peut être récupérer via un attribut

https://jsfiddle.net/wimbo/q0h5fwzv/2/

-
Edité par wimbo 24 mars 2017 à 15:27:52

GannoN

24 mars 2017 à 15:45:56

Un truc comme sa ?

<!DOCTYPE html>
<html>

<body>
<button data-isSwitch data-value="valueA,valueB" data-toid="insertId">Click me</button>
<input type="text" id="insertId" />

<button data-isSwitch data-value="Pomme,Poire,Tomates" data-toid="choix2">Click Fruit</button>
<input type="text" id="choix2" />

<script>
(function(){
	let elements = document.querySelectorAll('[data-isSwitch]')
    elements.forEach(elem => {
    	let values = elem.dataset.value.split(',')
        let toId = elem.dataset.toid
        elem.addEventListener('click', (e) => {
        	let celem = e.target
            let values = celem.dataset.value.split(',')
            let cIndex = parseInt( celem.dataset.cIndex || 0 )
            let newIndex = (cIndex + 1) % values.length
        	let toElem = document.querySelector('#' + toId)
            celem.dataset.cIndex = newIndex
            toElem.value = values[newIndex]
        })
        document.querySelector('#' + toId).value = values[0]
    })
})()
</script>
</body>

</html>

https://www.w3schools.com/code/tryit.asp?filename=FDYBB4N0734I

-
Edité par GannoN 24 mars 2017 à 15:46:22

zazzou

27 mars 2017 à 10:25:26

Merci tous les deux , c'est exactement cela !

Je vais adapter tout ça à mon besoin exact, mais je devrais pouvoir m'en sortir !

Juste deux questions :

1 . Les deux solutions sont elles compatibles quelque soit le navigateur utilisé ?

2 . La première solution : comment je fais pour récupérer la valeur via un attribut ? Et dans la seconde ?

Merci :-)

-
Edité par zazzou 27 mars 2017 à 10:27:54

Krogoth

27 mars 2017 à 12:00:04

Hello,

Un petit truc fait en vitesse pour l'idée:

https://jsfiddle.net/Krogoth/tcqmqpa7/

L'idée est donc d'avoir des image à la place des radio bouton et de passer de l'une à l'autre.

(J'ai pris des images en vitesse mais à toi de faire des images qui correspondent a ce que tu veux ;), ca peut tout aussi bien etre des div avec les symbole voulu dedans mais tu es un peu plus limité)

-
Edité par Krogoth 27 mars 2017 à 12:01:42

Un petit +1 si je vous ai aidé est toujours appréciable :).

zazzou

4 avril 2017 à 8:53:07

Je relance cette conversation.

J'ai donc opté pour cette solution :

<!DOCTYPE html>
<html>
 
<body>
<table>
<tr><td> 
<label for="select" id="casee">
  <input type="checkbox" id="select" pos = "0">
  <span>Mot</span></label></td><td> 
<label for="select2" id="casee2">
  <input type="checkbox" id="select2" pos = "0">
  <span>Mot</span></label></td></tr>
</table>
 
<script>
$(function () {
 $('#select').click(function () {
      var btn = $(this);
      var pos = parseInt(btn.attr("pos")); //on recupere la position du bouton
      pos += 1;  // on lui ajoute 1
      if(pos > 2){ pos = 0; } // si la position = 3 on revient à zero
       btn.attr("pos",pos); // puis on enregistre
      switch(pos){ //selon la valeur de de pos on detertermine letat du bouton
        case 0: btn.prop('checked',false);  
        document.getElementById("casee").style.backgroundColor = "#ccc";
        break;
        case 1: btn.prop('checked',true);
        document.getElementById("casee").style.backgroundColor = "red"; 
        break;
        case 2: btn.prop('indeterminate',true); 
        document.getElementById("casee").style.backgroundColor = "blue"; 
        break;

        default:btn.prop('checked',false);  
        document.getElementById("casee").style.backgroundColor = "#ccc"; 
        break;
      }
  });
});
</script>
</body>
 
</html>

Seulement voilà, si on imagine que j'ai 50 labels on aurait donc des id du type casee1, casee2, casee3 et ce jusqu'à 50 !

Je ne connais pas grand chose à javascript, comment je peux faire pour intégrer cela dans la fonction, pour éviter de copier/coller 50 fois le truc ? avec une boucle mais comment ?

Merci :-)