How to use javascript function in check box?

08 Feb, 2022
Checkboxes are used for instances where a user may wish to select multiple options, such as in the instance of a “check all that apply” question, in forms. HTML Checkboxes Selected. A checkbox element can be placed onto a web page in a pre-checked fashion by setting the checked attribute with a “yes” value.  
Typically shaped as square.
Allow the user to select options with a single click.
Options share a single name.
Checkbox allow you to select more than one options per groupHTML Code: HTML document by employing the dedicated HTML tag that wraps around JavaScript code. The tag can be placed in the section of your HTML, in the section, or after the close tag, depending on when you want the JavaScript to load.  
HTML Code: HTML document by employing the dedicated HTML tag that wraps around JavaScript code. The tag can be placed in the section of your HTML, in the section, or after the close tag, depending on when you want the JavaScript to load.  
html
<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8" />        <meta name="viewport"                content="width=device-width, initial-scale=1.0" />        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />    </head>    <body>        <div class="container">            <div class="row">                <div class="col-md-3"></div>                <div class="col-md-6">                    <form>                        <fieldset>                            <legend>                                <bold>Checkbox</bold>                            </legend>                            <div class="form-group">                                <label for="yesgraduated">                                    Are you graduated?                                </label>                                <input id="yesgraduated"                                   name="yesgraduated"                                   type="checkbox" value="yes"                                 onchange="graduatedFunction()" />                            <br />                            </div>                            <div id="graduated"                                class="form-group">                                <label for="degreename">                                    Degree Name:                                </label>                                <input type="text"                                    class="form-control"                                    name="degreename"                                    id="degreename" />                                <br />                            </div>                            <button type="button"                                    class="btn btn-primary"                                    value="Verify">                                Submit                            </button>                        </fieldset>                    </form>                </div>                <div class="col-md-3"></div>            </div>        </div>    </body></html>                   
JavaScript Code: Now, in the javaScript code we’re trying to give the option of including the degree in the form. The user need to tell if he/she is graduated or not. So when we click on this checkbox, a new input field opens up. So if someone clicks or doesn’t click it, the “graduatedFunction” function will either display the hidden part or display none.  
javascript
<script>    function graduatedFunction() {        if (document.getElementById("yesgraduated")        .checked)        {            document.getElementById("graduated")            .style.display = "inline";            document.getElementById("degreename")            .setAttribute("required", true);        } else {            document.getElementById("degreename")            .removeAttribute("required");            document.getElementById("graduated")            .style.display = "none";        }    }</script>
sumitgumber28
HTML-Misc
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
JavaScript | Promises
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?