How to use javascript function in check box?

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 ine options per group
    • Example: In this example, we will use basic HTML to create a checkbox and a input field. The input field will activate when the user checks the checkbox. In the first section, we will use the HTML to create the basic structure then in the second section, we will use the JavaScript to do the rest of the functional task.

      • 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.
        filter_none

        edit
        close

        play_arrow

        link
        brightness_4
        code

        <!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=
            </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>                    

        chevron_right

        
        

      • 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.

        filter_none

        edit
        close

        play_arrow

        link
        brightness_4
        code

        <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>

        chevron_right

        
        

      Complete Code: It is the combination of above two code section.

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!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=
              <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>
          </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>                    

      chevron_right

      
      

      Output:

      full-stack-img




      My Personal Notes arrow_drop_up

      Recommended Posts: