Aim

Program on the concept of checkbox selection in javascript

Requirement :

Working PC or Laptop ,
Installed any operating system
Any browser (Google Chrome)
Any code Editor(VS Code)

Theory

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.

Creating an HTML checkbox To create a checkbox, you use the element with the type of checkbox

A checkbox is a selection box that allows the users to make the binary choice (true or false) by checking and unchecking it. Basically, a checkbox is an icon, which is frequently used in GUI forms and application to get one or more inputs from the user.

If a checkbox is marked or checked, it indicates to true; this means that the user has selected the value.
If a checkbox is unmarked or not checked, it indicated to false; this means that the user has not selected the value. Remember that checkbox is different from the radio button and dropdown list because it allows multiple selections at once. In contrast, the radio button and dropdown allow us to choose only one from the given options.

Checking if a checkbox is checked A checkbox has two states: checked and unchecked.

To get the state of a checkbox, you follow these steps:

First, select the checkbox using a DOM method such as getElementById() or querySelector().
Then, access the checked property of the checkbox element. If its checked property is true, then the checkbox is checked; otherwise, it is not.

code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkbox</title>
</head>

<body style="margin: 50px;">
    <label for="computer">
        <input type="checkbox" id="computer" name="computer" value="yes"> Computer Engg
    </label>
    <label for="Mechanical">
        <input type="checkbox" id="Mechanical" name="Mechanical" value="yes"> Mechanical Engg
    </label>
    <label for="Civil">
        <input type="checkbox" id="Civil" name="Civil" value="yes"> Civil Engg
    </label>
    <button onclick={handleClicked()}>Submit</button>
    <script>
        console.log(computer); // false
        function handleClicked() {
            const computer = document.querySelector('#computer:checked') !== null;
            const Mechanical = document.querySelector('#Mechanical:checked') !== null;
            const Civil = document.querySelector('#Civil:checked') !== null;
            var m =
                `You have selected ${computer ? "Computer Engg" : ""}, ${Mechanical ? "mechanical Engg" : ""}, ${Civil ? "Civil Engg" : ""}`
            console.log(m)
            alert(m)
        }
    </script>

</body>

</html>

Conclusion: Finally, we can conclude that we have successfully programmed on the concept of changing the label in javascript.

Aim:Program on the concept of checkbox selection in javascript

Aim

Subscribe to my newsletter

Ashwin Telmore

Ashwin Telmore