d947d8c975
For the check-radio-buttons-and-checkboxes-by-default exercise, campers are able to pass the exercise if the checked attribute is written in an incorrect syntax. This PR checks the innerText of the elements which are being added the 'checked' attribute and ensures that their value doesn't change. Fixes #43750
117 lines
3.7 KiB
Markdown
117 lines
3.7 KiB
Markdown
---
|
|
id: bad87fee1348bd9aedd08835
|
|
title: Check Radio Buttons and Checkboxes by Default
|
|
challengeType: 0
|
|
videoUrl: 'https://scrimba.com/p/pVMPUv/cWk3Qh6'
|
|
forumTopicId: 301094
|
|
dashedName: check-radio-buttons-and-checkboxes-by-default
|
|
---
|
|
|
|
# --description--
|
|
|
|
You can set a checkbox or radio button to be checked by default using the `checked` attribute.
|
|
|
|
To do this, just add the word `checked` to the inside of an input element. For example:
|
|
|
|
```html
|
|
<input type="radio" name="test-name" checked>
|
|
```
|
|
|
|
# --instructions--
|
|
|
|
Set the first of your radio buttons and the first of your checkboxes to both be checked by default.
|
|
|
|
# --hints--
|
|
|
|
Your first radio button on your form should be checked by default.
|
|
|
|
```js
|
|
assert($('input[type="radio"]').prop('checked'));
|
|
```
|
|
|
|
Your first checkbox on your form should be checked by default.
|
|
|
|
```js
|
|
assert($('input[type="checkbox"]').prop('checked'));
|
|
```
|
|
|
|
You should not change the inner text of the `Indoor` label.
|
|
|
|
```js
|
|
assert.equal(document.querySelector('label[for="indoor"]')?.innerText?.trim(), 'Indoor');
|
|
```
|
|
|
|
You should not change the inner text of the `Loving` label.
|
|
|
|
```js
|
|
assert.equal(document.querySelector('label[for="loving"]')?.innerText?.trim(), 'Loving');
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<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"> 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>
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```html
|
|
<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" 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>
|
|
<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>
|
|
```
|