Question 170671 in Html Question posted in
Some basic documentation can be found here.

Can JavaScript uncheck a checkbox?

when making a simple form for a small project to make a fake photography page i was atempting to add a checkbox form that can be unchecked when you press the submit button after reaserch on outher posts i was unable to find a fix for my problem any help?

<div>
    <fieldset>
    <legend>Appointment scheduling</legend>
    
    <p>Your Name: <p>
    <textarea name="story" rows="1" cols="50" id='output1'> </textarea>
    <p>Your Email: <p>
    <textarea name="story" rows="1" cols="50" id='output2'> </textarea>
    <p>date:</p>
    <input type="date" id="start" name="trip-start" value="2023-06-17" min="2018-01-01" max="2035-12-31">
    <br>

    <div>
      <input type="checkbox" id="checkbox" >
      <label>Regular photoshoot</label>
    </div>

    <div>
      <input type="checkbox" id="checkbox" >
      <label>Nature/Outdoors</label>
    </div>
    
    <div>
      <input type="checkbox" id="checkbox" >
      <label>Wedding</label>
    </div>
    
    <div>
      <input type="checkbox" id="checkbox" >
      <label>senior photoshoot</label>
    </div>
    
    <div>
      <input type="checkbox" id="checkbox" >
      <label>Family photoshoot</label>
    </div>
    
    <div>
      <input type="checkbox" id="checkbox">
      <label>Pets/Animals</label>
    </div>
    
    <button class="button button1" type="button" onclick="javascript:eraseText();">Submit</button>
</fieldset>
</div>

 <script>
        function eraseText() {
          document.getElementById("output1").value = "";
          document.getElementById("output2").value = "";

          const checkbox = document.getElementById("checkbox");
          checkbox.removeAttribute('checked');
        }
  </script>

use of jquery as seen on this page Remove attribute "checked" of checkbox did not change the function and did nothing to the code

Tags:

2

Answers


  1. 0

    The checked attribute sets the default state of the checkbox, not the current value.

    To modify the current value, assign a boolean value to the checked property.

    checkbox.checked = false;
    Login or Signup to reply.
  2. 0

    id’s need to be unique, so change id=checkbox to class = checkbox. then get the array of all checkboxes with document.getElementsByClassName("checkbox"). Finally put that in a loop and set checkbox[i].checked = false;

    function eraseText() {
  document.getElementById("output1").value = "";
  document.getElementById("output2").value = "";

  const checkbox = document.getElementsByClassName("checkbox");
  for (i = 0; i < checkbox.length; i++) {
    checkbox[i].checked = false
  }
}
    <div>
  <fieldset>
    <legend>Appointment scheduling</legend>

    <p>Your Name:
      <p>
        <textarea name="story" rows="1" cols="50" id='output1'> </textarea>
        <p>Your Email:
          <p>
            <textarea name="story" rows="1" cols="50" id='output2'> </textarea>
            <p>date:</p>
            <input type="date" id="start" name="trip-start" value="2023-06-17" min="2018-01-01" max="2035-12-31">
            <br>

            <div>
              <input type="checkbox" class="checkbox">
              <label>Regular photoshoot</label>
            </div>

            <div>
              <input type="checkbox" class="checkbox">
              <label>Nature/Outdoors</label>
            </div>

            <div>
              <input type="checkbox" class="checkbox">
              <label>Wedding</label>
            </div>

            <div>
              <input type="checkbox" class="checkbox">
              <label>senior photoshoot</label>
            </div>

            <div>
              <input type="checkbox" class="checkbox">
              <label>Family photoshoot</label>
            </div>

            <div>
              <input type="checkbox" class="checkbox">
              <label>Pets/Animals</label>
            </div>

            <button class="button button1" type="button" onclick="javascript:eraseText();">Submit</button>
  </fieldset>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search