Javascript - CheckBox Check, Uncheck

How To Use Check Box In Javascript

javascript using check box



In This Javascript Tutorial we will see How To Use CheckBox And Check If It's Checked Or Not In JS Using Netbeans Editor .




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript CheckBox</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        
        <p id="pgh">Text Message Here</p>
        <input type="checkbox" class="chb" onclick="func();"/>Color Red [0]
        <input type="checkbox" class="chb" onclick="func();"/>Font Size 30px [1]
        <input type="checkbox" class="chb" onclick="func();"/>Font Weight Bold [2]
        
        <script>
    
             function func()
             {
                 var chb = document.getElementsByClassName('chb');
                 
                 if(chb[0].checked)
                 {
                     document.getElementById('pgh').style.color = '#F00';
                 }
                 if(!chb[0].checked)
                 {
                     document.getElementById('pgh').style.color = '#000';
                 }
                 
                 if(chb[1].checked)
                 {
                     document.getElementById('pgh').style.fontSize = '30px';
                 }
                 if(!chb[1].checked)
                 {
                     document.getElementById('pgh').style.fontSize = '1em';
                 }
                 
                 if(chb[2].checked)
                 {
                     document.getElementById('pgh').style.fontWeight = 'bold';
                 }
                 if(!chb[2].checked)
                 {
                     document.getElementById('pgh').style.fontWeight = 'normal';
                 }
                 
             }
    
        </script>
        
    </body>
</html>




Share this

Related Posts

Previous
Next Post »