Assignment completed, form functioning improperly

Tell us what’s happening:
I completed the checkbox form section, after 3 hours of trying to distinguish the differences between the id and name attribute (I was successful btw). The issue I am running into now is that all three check boxes work properly when clicking on the boxes themselves, but the form behavior is inconsistent when I click the labels of the check boxes. Checkbox one checks when I click its text label, but checkbox two and three also check box one, without checking themselves.

I am confused about this because the exercise says my code is correct.

PS. If posting topics as I have questions rather than just asking on a previous thread that I’ve posted is improper, let me know.

Thanks.

Your code so far


<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="/submit-cat-photo">
  <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
  <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button><br>

  <label for="personality"><input type="checkbox"id="personality" name="personality">fun</label><br>
  <label for="personality"><input type="checkbox"id="personality" name="personality">crazy</label><br>
  <label for="personality"><input type="checkbox"id="personality" name="personality">boring</label><br>

  

</form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.87 Safari/537.36.

Challenge: Create a Set of Checkboxes

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes

I changed the label “for” value and input “id” value to individually match the labels themselves, without changing the “name” values and it is working properly now.

Does this mean that the NAME attribute is the only one that has to be static in the group?

Yes, checkboxes are grouped together using name,hence only name needs to be static. Furthemore, id needs to be unique and used only once in the document. Else, it’s difficult when accessing certain elements and modifying them through JavaScript.