Bascule deux cases à cocher

J'ai deux cases à cocher, chacune traitant un état vertical et horizontal respectivement. C'est correct si les deux sont éteints, mais si l'un est sur l'autre doit être éteint et le plus important, les deux ne peuvent pas être allumés.Bascule deux cases à cocher

Je ne veux pas jQuery ici.

Si les deux ne sont pas cochés et que j'appuie sur l'horizontale puis sur la verticale, ils basculeront, car l'horizontale ne sera pas cochée et la verticale sera vérifiée.

Mais si je le fais dans l'autre sens en commençant par la verticale, je ne peux pas vérifier l'horizontale.

Le code complet est le github et la démo est exécutée au gh-pages.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Toggle</title> 
 
</head> 
 
<style> 
 
    .constraint { 
 
    color: #007bff; 
 
    padding: 0rem .5rem; 
 
    } 
 
    
 
    span.horz:before { 
 
    content: "\2194"; 
 
    } 
 
    
 
    span.vert:before { 
 
    content: "\2195"; 
 
    } 
 
</style> 
 

 
<body> 
 
    <span class="constraint">Constraint: </span> 
 
    <span class="constraint vert"> 
 
     <input type="checkbox" id="vertical" onchange="constraints()"> 
 
     <span class="constraint horz"></span> 
 
    <input type="checkbox" id="horizontal" onchange="constraints()"> 
 
</body> 
 
<script type="text/javascript"> 
 
    function constraints() { 
 
    inputVert = document.getElementById("vertical"); 
 
    inputHorz = document.getElementById("horizontal"); 
 
    console.log("initially: vert:" + inputVert.checked); 
 
    console.log("initially: horz:" + inputHorz.checked); 
 
    if (inputVert.checked) { 
 
     console.log("vert clicked -> vert:" + inputVert.checked); 
 
     console.log("vert clicked -> horz:" + inputHorz.checked); 
 
     // inputHorz = document.getElementById("horizontal"); 
 
     inputHorz.checked = false; 
 
     // inputVert.checked = true; 
 
    }; 
 
    if (inputHorz.checked) { 
 
     console.log("horz clicked -> vert:" + inputVert.checked); 
 
     console.log("horz clicked -> horz:" + inputHorz.checked); 
 
     // inputVert = document.getElementById("vertical"); 
 
     inputVert.checked = false; 
 
     // inputHorz.checked = true; 
 
    }; 
 
    } 
 
</script> 
 

 
</html>

Toute aide grandement appréciée,

Merci

Source

2017-09-14 Shane G

Avec JQuery, vous pouvez le faire comme ça, espérons que cette aide vous

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Toggle</title> 
 
</head> 
 
<style> 
 
    .constraint { 
 
    color: #007bff; 
 
    padding: 0rem .5rem; 
 
    } 
 

 
    span.horz:before { 
 
    content: "\2194"; 
 
    } 
 

 
    span.vert:before { 
 
    content: "\2195"; 
 
    } 
 
</style> 
 

 
<body> 
 
    <span class="constraint">Constraint: </span> 
 
    <span class="constraint vert"> 
 
    <input type="checkbox" id="vertical"> 
 
    <span class="constraint horz"></span> 
 
    <input type="checkbox" id="horizontal"> 
 
</body> 
 
<script type="text/javascript"> 
 
    
 
    $('#vertical').change(function() { 
 
     if($(this).is(":checked")){ 
 
      $('#horizontal').attr('checked', false); 
 
     }  
 
    }); 
 
    
 
    $('#horizontal').change(function() { 
 
     if($(this).is(":checked")){ 
 
      $('#vertical').attr('checked', false); 
 
     }  
 
    }); 
 
    
 
    
 
</script> 
 

 
</html>

Source

2017-09-14 14:33:35

Je vais devoir utiliser jQuery, merci beaucoup. –

Le JS doit-il être dans une fonction appelée immédiatement? Ou l'usage déjà d'un IIF pourrait-il faire que le JS que vous avez écrit ne fonctionne pas? –

J'ai ajouté le lien jQuery cdn dans la tête. –

Ce scénario est classique pour l'utilisation d'une radio d'entrée. Cela force l'utilisateur à choisir jusqu'à un choix. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio

Source

2017-09-14 14:25:15

J'espérais changer la case à cocher une belle bascule à la recherche comme ici http: // www .bootstraptoggle.com/Mais si je dois utiliser des boutons radio, je ne pense pas pouvoir le faire. Merci –

S'il vous plaît, mettez un peu de contexte autour de votre lien. La réponse ne peut pas compter uniquement sur du contenu externe, qui pourrait se déconnecter, rendant le message inutile aux autres utilisateurs ... –

Bascule deux cases à cocher

Répondre

Questions connexes