0

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

Alex m.
  • 27
  • 4
  • 1
    Check your checkboxes all have the same id, so `document.getElementById("checkbox")` always removes from the first one. Ids must be unique. – mykaf May 17 '23 at 18:53
  • You should [learn how to use the label element properly](http://www.456bereastreet.com/archive/200711/use_the_label_element_to_make_your_html_forms_accessible/). Without a for attribute or a form control inside it, a label is useless. – Quentin May 17 '23 at 18:55
  • 1
    `id` elements must be **unique** in a document, you have multiple inputs with the same `id` which is not allowed. Use a [validator](https://validator.nu/). – Quentin May 17 '23 at 18:56

2 Answers2

1

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>
DCR
  • 14,737
  • 12
  • 52
  • 115
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;
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335