vendredi 15 juillet 2022

How to operate checkbox with keydown property?

I want to tick the checkbox when enter pressed and output should be display in line tag similarly after pressing backspace checkbox should be unticked and element must remove from line. but how can i do that? without using jquery.

<!DOCTYPE html>
<html>
    <head>
        <title>Checkbox Attandance</title>
        <style>
            li {
            max-width: 800px;
            word-wrap: break-word;
            font-size: 27px;
            margin-left: 200px;
                color: blue;
                margin-top: 100px;
        }

        h1{
            color: crimson;
            font-weight: 1000px;
            font-size: 60px;
            margin-left: 500px;;
            
        }
        </style>  
    </head>
    <body style="background-color: blanchedalmond;" >
        <h1>Attendance</h1>
        <li id="dis">Present Students<br></li><br>
        

     <script>
         for(i=301;i<359;i++){
         document.write("<input type='checkbox' value='"+i+"' onkeydown='absent(this)'>"+i+"<br>");
         }
         function absent(e){
            if(event.key=="Enter"){
            e.checked=true;
            document.getElementById("dis").innerHTML+=" "+e.value;
             
            }
            
            if(e.key=="Backspace"){
                e.checked=false;
               var x=document.getElementById("dis").innerHTML;
               var m=x.replace(e.value,"")
                document.getElementById("dis").innerHTML=m;
             
            }

            
         }
     </script>
    </body>
</html>



Aucun commentaire:

Enregistrer un commentaire