javascript checkbox basic

J'essaie simplement d'obtenir une alerte qui est le résultat de la vérification d'une boîte. Je n'arrive pas à isoler le check-event. il se déclenche lorsque je charge la page même si j'essaie de définir la propriété check sur false au départ. En recherchant ça m'a amené à jquery et tout ça, mais pour ma formation formelle en javascript, je dois m'en tenir à javascript et le faire descendre en premier (jquery sera mon prochain cours).javascript checkbox basic

est ici le code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en"> 
    <head> 
    <title>JavaScript Challenges</title> 
    <script type="text/javascript"> 
    window.onload = function(){ 
    checkbox = document.getElementById("subscribe"); 
checkbox.checked = false; 


if (checkbox.checked = true){ 
    alert("checked works"); 
    } 

} 

    </script> 
    </head> 
    <body> 
    <form action=""> 
     <fieldset> 

     <legend>Email subscriptions</legend> 

     <p id="subscribepara"> 
      <label> 
      <input type="checkbox" name="subscribe" id="subscribe"> 
      Yes! I would like to receive the occasional newsletter via email. 
      </label> 
     </p> 

     <p id="emailpara"> 
      <label> 
      Email Address: 
      <input type="text" name="email" id="email"> 
      </label> 
     </p> 

     </fieldset> 
    </form> 
    </body> 
</html>

c'est un défi javascript de Wikiversité btw. deuxième partie du premier défi. première partie où vous avez besoin de masquer l'élément email avec style.display = 'none' a bien fonctionné.

Source

2011-02-08 Immers

On dirait qu'il est mise à feu parce que l'opérateur de comparaison est cassé:

if (checkbox.checked = true)

devrait être

if (checkbox.checked == true)

La version que vous avez met essentiellement l'état vérifié vrai. Cette opération est réussie, et par conséquent elle-même se résout à vrai (résultant en entrer le conditionnel et voir l'alerte).

De plus, ce code ne se déclenchera pas si vous cochez ou décochez la case manuellement. Cela ne fonctionne qu'une seule fois, lorsque la page se charge. Une façon de lier à l'événement click est de specify a function call in the markup pour la case à cocher.

Il est préférable de ne pas le faire dans le balisage, mais plutôt de séparer le code et de lier les événements à l'extérieur. Mais vous y arriverez quand vous entrerez dans jQuery. Commencer avec les bases est très bien.

Source

2011-02-08 12:21:37 David

'if (checkbox.checked)' devrait aussi convenir, non? – erickb

@erickb: Devrait être. JavaScript est un peu bizarre sur les types primitifs pour quelqu'un venant d'un arrière-plan typé statiquement (comme moi), mais ça devrait marcher. – David

Si vous voulez un événement pour déclencher après vérification de la case à cocher, vous ne devriez pas le lier à window.onload, mais l'événement onchange de la case à cocher:

<script> 
    var checkbox = document.getElementById('subscribe'); 
    checkbox.onchange = function() { 
     if (checkbox.checked = true){ 
      alert("checked works"); 
     } 
    } 
</script>

S'il vous plaît noter que l'événement onchange ne fonctionne pas de la même manière pour Internet Explorer que les autres navigateurs. C'est un sujet tout à fait différent, donc si vous voulez plus d'informations à ce sujet, jetez un oeil à this question.

Veuillez également noter que la fonction ci-dessus doit être définie en dessous de l'élément d'entrée réel. Si vous incluez cet exemple dans le <head>, il ne connaît pas encore l'existence d'un élément avec l'ID subscribe et le JavaScript échouera. Une meilleure alternative, plus souple est de lier les gestionnaires d'événements après que le DOM charge, mais par souci de concision, je vous conseille de rechercher SO ou Google sur ce sujet si vous voulez plus d'informations :)

Source

2011-02-08 12:22:33

Je pense votre approche est légèrement décalée - d'une manière primordiale, vous n'êtes pas en train d'attraper/manipuler les événements du tout maintenant. Actuellement, lorsque la page charge, vous regardez l'état coché de la case à cocher, en lançant éventuellement l'alerte. Ma compréhension de l'exigence est que vous ouvrez une alerte lorsque la case à cocher a été modifiée pour être cochée.

(Et comme David l'a souligné, vous vérifiez en fait la case à cocher par inadvertance lorsque vous effectuez la vérification.Ce que vous voulez faire à la place est d'enregistrer un écouteur pour l'événement onchange de la case à cocher, qui exécutera du code chaque fois que la case à cocher changera. Comme il semble que vous voulez apprendre cela, je vais le laisser là plutôt que de donner un code exact. Jetez un oeil à ce introduction to event handlers si vous voulez une lecture plus approfondie sur le quoi et le comment (notez que c'est beaucoup plus impliqué que vous avez besoin pour ce cas particulier).

Source

2011-02-08 12:24:11

merci pour le lien! l'article a commencé très amical profane, mais est devenu très confus. Je suppose que j'ai besoin de prendre la tête dans d'autres exemples. – Immers

Pour qu'une fonction puisse être appelée en cochant une case, vous devez ajouter un écouteur d'événement à la case à cocher. Voici comment faire:

// you have to do it inside the window.onload function so you know the DOM is available 
window.onload = function(){ 
var checkbox = document.getElementById("subscribe"); 
checkbox.onchange = function(){ 
    if(checkbox.checked == true){ 
    alert('checked!'); 
    } 
}; 
};

La propriété « onchange » est réglé sur une fonction qui sera appelée à chaque fois que la case à cocher est change d'état de vérification à versa sans contrôle et Vica. A l'intérieur de cette fonction, nous vérifions la valeur de checked et lancons l'alerte le cas échéant.

Espérons que ça aide!

Source

2011-02-08 12:24:35 Shakakai

oui ça m'a beaucoup aidé! Merci! – Immers

Vérifiez votre comparison, checkbox.checked = true est une affectation. Recherche le onClick event

Puisqu'il s'agit essentiellement de devoirs, je ne publie pas de code de travail. Vous êtes proche, et après avoir lu plus, vous l'aurez.

Source

2011-02-08 12:27:24 Chuck

Vous pouvez utiliser une fonction et la déclencher via un événement onclick. De cette façon, vous pouvez également le réutiliser sur d'autres cases à cocher.

# js 
function alert_on_checked(elementId) { 
    var checkbox = document.getElementById(elementId); 
    if(checkbox.checked) { 
    alert('checked works!'); 
    } 
} 

# html 
... 
<input type="checkbox" name="subscribe" id="subscribe" onclick="alert_on_checked(this.id)" > 
...

Source

2011-02-08 12:36:47 erickb

Intéressant. Je me demande cependant ce que l'affaire est de placer le gestionnaire d'événements dans l'élément HTML. Mon cours ne peut pas arrêter de crier sur comment des choses comme le placement de script dans les éléments est envahissante. – Immers

javascript checkbox basic

Répondre

Questions connexes