I am having issues with the checkboxes and radio by default. I have done all that needs to be done but i cant seem to get it right

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **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://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 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="https://www.freecatphotoapp.com/submit-cat-photo">
  <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
  <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
  <label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"checked> Loving</label>
  <label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
  <label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</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/71.0.3578.98 Safari/537.36

Challenge: Check Radio Buttons and Checkboxes by Default

Link to the challenge:

2

Hello ,

Your code is just one step away from the right solution.

To check radio buttons or checkboxes by default you can simply use the checked attribute to the input element.

From your code you have made the first checkbox checked by default.
You should do the same to the first radio button.

Hope this helps :slight_smile:

3

you write checked on the first checkbox option do it with the first radio button option too

4

Remember to read the instructions meticulously.

The instructions for that challenge say:
Set the first of your radio buttons *and* the first of your checkboxes to both be checked by default.

You did the second part, but not the first part of the instructions required for it to pass.

You didn’t check the first radio button.

5

Thank you so much Crptic_X. I have checked my first radio buuton but it is asking me not to change the inner text of the Indoor and Loving label. I do not understand what that means.

6

Thank you so much Fatmaa. I have done as advised but it is telling me not to change the inner text of the Loving and Indoor label. Kindly explain what that means

7

It says you should not change the inner text of the indoor label and the loving label. Adding the checked attribute to the input element does not change the inner text of the label.

The error might be coming because you might have made some changes to the label tag.


This is how you use the checked attribute.

<input type="radio" id="example" name="example-name"  value="example" checked>

Notice the checked attribute
You add it to the input element not the label, And also make sure no change is done to the label tags, as a change to the label tags are not required now.

If you have made some changes to the label element, you could reset the lesson and try from the beginning .

If you have not made any unnecessary changes, I would like to see your current code

8

Thank you so much for the assistance. I have done as advised but i cant make headway still

9

Please post your updated code

1 Like
10 
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"checked> Indoor</label>

    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>

    <label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"checked> Loving</label>
11

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

12 
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"checked> Indoor</label>

    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>

    <label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"checked> Loving</label>
13

noted.

type or paste code here
```<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"checked> Indoor</label>
    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
    <label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"checked> Loving</label>
14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.