J'ai rencontré un problème. Mon code ne s'exécute qu'une seule fois. Lorsque je décoche la case, je veux qu'il revienne à son état d'origine, mais cela ne se produit pas. Merci de votre aide.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" onclick="myFunction()">
    <p id="lable">Hello !!!</p>
</body>
<script>
    function myFunction() {
        var checked = true;
        var unchecked = false;
        if (checked) {
            document.getElementById('lable').style.textDecoration = 'line-through';
            document.getElementById('lable').style.color = "rgb(134, 134, 134)";
        } else if (unchecked) {
            document.getElementById('lable').style.color = 'black';
        }

    }
</script>
</html>
0
Amir 3 juin 2020 à 16:16

6 réponses

Meilleure réponse

Vous devez montrer en fonction quel est l'état de votre checkBox. Essayez ce code:

    <body>
    <input type="checkbox" id="ch"onclick="myFunction()">
    <p id="lable">Hello !!!</p>
</body>
<script>
    function myFunction() {


        if (document.getElementById("ch").checked) {
            document.getElementById('lable').style.textDecoration = 'line-through';
            document.getElementById('lable').style.color = "rgb(134, 134, 134)";
        } else{
            document.getElementById('lable').style.color = 'black';
            document.getElementById('lable').style.textDecoration = null;

        }

    }
-1
Timon S 3 juin 2020 à 13:41

Vous affectez vérifié comme un booléen (vrai ou faux). if (true) et if (false) ne vérifie pas si la case est cochée ou non!

C'est fait comme suit:

HTML : vous attribuez un identifiant à l'élément d'entrée de la case à cocher

<input type="checkbox" id="mycheckbox" onclick="myFunction()">

JS : vous obtenez l'élément par son identifiant et vérifiez s'il est coché ou non.

mycheckbox=document.getElementByID("mycheckbox");
if(mycheckbox.checked == true){
 //your code here
}
else{
//your code here
}
0
Tarekas 3 juin 2020 à 13:22

Votre logique de myFunction () est fausse. À chaque fois, il passera au if bloc uniquement lorsque vous définissez var checked = true; Essaye ça:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" id="checkBoxId" onclick="myFunction()">
    <p id="lable">Hello !!!</p>
</body>
<script>
    function myFunction() {

        var isChecked = document.getElementById("checkBoxId").checked;
        if (isChecked) {
            document.getElementById('lable').style.textDecoration = 'line-through';
            document.getElementById('lable').style.color = "rgb(134, 134, 134)";
        } else{
            document.getElementById('lable').style.textDecoration = 'none';
            document.getElementById('lable').style.color = 'black';
        }

    }
</script>
</html>

0
Nish 3 juin 2020 à 13:23

Vous devez extraire l'état vérifié du nœud dom réel au lieu de coder en dur une valeur.

var checked = document.querySelector('input').checked;

Il y a quelques autres problèmes ici. Au lieu d'utiliser une balise <p>, vous devriez utiliser un <label>. Vous pouvez également réécrire le javascript pour qu'il soit strictement css.

<div>
    <input type="checkbox" id="check">
    <label for="check">Hello !!!</label>
</div>

input:checked + label {
    color: rgb(134, 134, 134)
    textDecoration: 'line-through'
}
0
Deadron 3 juin 2020 à 13:23
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" onclick="myFunction()">
    <p id="lable">Hello !!!</p>
</body>
<script>
    var checked = false;
    function myFunction() {          
        if (checked) {
            document.getElementById('lable').style.textDecoration = 'line-through';
            document.getElementById('lable').style.color = "rgb(134, 134, 134)";
        } else {
            document.getElementById('lable').style.textDecoration = '';
            document.getElementById('lable').style.color = 'black';
        }
        checked = !checked;    
    }
</script>
</html>
0
user8689373 3 juin 2020 à 13:29

Vos variables ne sont pas associées à la case à cocher. Regardez ceci: https://www.w3schools.com/howto/howto_js_display_checkbox_text.asp cela devrait vous aider!

0
Monegasqu 3 juin 2020 à 13:25