Create a Set of Checkboxes-name attribute

HTML-CSS
1

Tell us what’s happening:

I understand it with Radio buttons having the same “name” attribute to provide mutual-exclusivity. But, with checkboxes, (in the exercise, it is insisted that the same name be given to all the checkboxes, therein), I don’t understand why? Can someone please explain? 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>
  </form>
</main>

Your browser information:

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

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

2

Your form might have a question that allows a user to enter multiple values. For example, if you’re asking a user what their favorite subjects are, you can have multiple checkboxes with the same name:

<label><input type="checkbox" name="subject" value="math"> Math</label>
<label><input type="checkbox" name="subject" value="science"> Science</label>
<label><input type="checkbox" name="subject" value="history"> History</label>
3

Thanks for the time and patience!

I’m still wondering if, for the above example, would it be wrong to use different names…

Thanks, again!

4

We give the same name for radio button name attribute so that it understand that they are grouped together into one. You cannot select multiple options with a radio button. That’s where checkbox comes to help us.

On Adding the same name attributes to multiple checkbox we are grouping it also here we can select multiple option at the same time.

Ex - Assume that we have a form which has a radio buttons for gender and a checkbox for elective subjects

  • You can select only one option gender from the radio button
  • You can select multiple options from the elective subject column