How to use javascript function in check box?

How to use javascript function in check box?

Last Updated : 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 group
- 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>

How to use javascript function in check box?

nehaahlawat

Improve

Article Tags :

Similar Reads

How to write a function in JavaScript ?

JavaScript functions serve as reusable blocks of code that can be called from anywhere within your application. They eliminate the need to repeat the same code, promoting code reusability and modularity. By breaking down a large program into smaller, manageable functions, programmers can enhance cod

How to get all checked values of checkbox in JavaScript ?

A checkbox is a selection box that enables users to pick true or false in a binary manner by checking or unchecking it. When a checkbox is checked, it shows that the value has been chosen by the user, and when a checkbox is not checked indicates false which denotes that the user has not chosen the v

How to Call a JavaScript Function from Chrome Console ?

One can call a JavaScript Function from the Chrome Console. We will learn how can we call the function in the console that is written in JavaScript. Steps to call a JavaScript Function from Chrome ConsoleOpen the Chrome ConsoleYou can open the Chrome Console by right-clicking on your webpage, select

How to Create a Select All Checkbox in JavaScript ?

In web apps with lots of checkboxes, a "Select All" checkbox is useful. It lets users check or uncheck all checkboxes at once, making things quicker. This feature can be implemented in various ways, such as utilizing JavaScript and JQuery to incorporate a "Select All" checkbox. This enhances the app

How to Check/Uncheck the checkbox using JavaScript ?

To check and uncheck the checkbox using JavaScript we can use the onclick event to toggle the checkbox value. We can also check or uncheck all the checkboxes on loading the webpage using JavaScript onload function.In this article, we will learn how to check/uncheck the checkbox using JavaScript. As

How to use Checkbox inside Select Option using JavaScript ?

In this article, we are going to learn how to use Checkbox inside Select Option using JavaScript. ApproachThe HTML contains a styled dropdown (selectBox) and hidden checkboxes (checkBoxes).CSS styles enhance the appearance, styling the dropdown and checkboxes.The function showCheckboxes() toggles ch

How to Call a JavaScript Function from an onsubmit Event ?

The onsubmit event attribute in HTML is triggered when a form is submitted. It is also useful for validating form data or performing actions before any submission and ensures better control and validation of user inputs before data is sent. The below methods can be used to call a JavaScript function

How to find all checkbox inputs using jQuery ?

The task is to find all the checkbox input using jQuery. Checkboxes are the square boxes that are ticked when activated, and it is used to select one or more number of choices. Method and Selectors used: :checkbox: This selector is used to select the input element with type = checkbox. .wrap(): This

How to check whether a radio button is selected with JavaScript ?

Here are the different methods used to check the radio button is selected:1. Using Input Radio checked propertyThe checked property in JavaScript checks if a radio button is selected. By using document.getElementById or querySelector to get the radio button, the checked property returns true if the

Call a JavaScript Function from Chrome Console

Google Chrome does not allow JavaScript to run from URLs due to security issues. The following are the steps and instructions to follow to Call a JavaScript Function from Chrome Console. Steps to call a JavaScript Function from Chrome ConsoleYou can follow the below steps to call and write a JavaScr