Facebook Twitter Instagram
    TecAdmin
    • Home
    • FeedBack
    • Submit Article
    • About Us
    Facebook Twitter Instagram
    TecAdmin
    You are at:Home»Programming»JavaScript»How to Check if Checkbox is Checked with JavaScript

    How to Check if Checkbox is Checked with JavaScript

    By RahulNovember 9, 20151 Min Read

    This tutorial will help you with JavaScript code with jQuery, which check that checkbox is checked or not and perform operations based on that. This useful before submitting any form to check if any checkbox is checked or not.

    Advertisement

    JavaScript Code :-

    Below is the JavaScript code which check that checkbox (id: checkBox1) is selected or not. If checkbox is selected, it will unhide the element with id msgBox and that element will appear on page. If checkbox is not selected, it will hide the same element on page. Make sure you have included JQuery on your webpage.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script type="text/javascript">
     
    if(document.getElementById('checkBox1').checked) {
          $("#msgBox").show();
    } else {
          $("#msgBox").hide();
    }
     
    </script>

    Demo URL :-

    You can visit the following url to view demo for the same task. This demo used above JavaScript code to do it.

    Click to view demo >>

    HTML Code :-

    Below the sample html code used for creating this demo on above url. This code has a div (ID: msgBox) which appears on page if checkbox is checked and hide if checkbox is not checked.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
     
    function checkBoxDemo() {
       if(document.getElementById('checkBox1').checked) {
            $("#msgBox").show();
       } else {
            $("#msgBox").hide();
       }
    }
    </script>
    </head>
    <body>
    Demo - <input type="checkbox" id="checkBox1" onClick="checkBoxDemo()" />
    <div id="msgBox" style="display:none">Checkbox checked ☺</div>
    </body>
    </html>

    checkbox html javascript jquery js
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email WhatsApp

    Related Posts

    20 Common JavaScript Interview Questions and Answers

    JavaScript Arrays Tutorial for Beginner's

    JavaScript Arrays: A Beginner’s Guide

    How to Get the Current Timestamp in JavaScript

    Add A Comment

    Leave A Reply Cancel Reply

    Advertisement
    Recent Posts
    • Configure Postfix to Use Gmail SMTP on Ubuntu & Debian
    • PHP Arrays: A Beginner’s Guide
    • Deploying Flask Application on Ubuntu (Apache+WSGI)
    • OpenSSL: Working with SSL Certificates, Private Keys and CSRs
    • How to Create and Read List in Python
    Facebook Twitter Instagram Pinterest
    © 2023 Tecadmin.net. All Rights Reserved | Terms  | Privacy Policy

    Type above and press Enter to search. Press Esc to cancel.