| 
									
										
										
										
											2021-06-15 03:34:20 +09:00
										 |  |  | --- | 
					
						
							|  |  |  | id: bad87fee1348bd9aedd08835 | 
					
						
							|  |  |  | title: Marcar botões e caixas de seleção por padrão | 
					
						
							|  |  |  | challengeType: 0 | 
					
						
							|  |  |  | videoUrl: 'https://scrimba.com/p/pVMPUv/cWk3Qh6' | 
					
						
							|  |  |  | forumTopicId: 301094 | 
					
						
							|  |  |  | dashedName: check-radio-buttons-and-checkboxes-by-default | 
					
						
							|  |  |  | --- | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | # --description--
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | É possível deixar selecionada uma caixa ou um botão de seleção por padrão usando o atributo `checked`. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Para fazer isso, basta adicionar a palavra `checked` dentro de um elemento input. Por exemplo: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```html | 
					
						
							|  |  |  | <input type="radio" name="test-name" checked> | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | # --instructions--
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Faça com que seu primeiro radio button e sua primeira checkbox estejam selecionados por padrão. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | # --hints--
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | O primeiro radio button de seu formulário deve estar selecionado por padrão. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | assert($('input[type="radio"]').prop('checked')); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | A primeira checkbox de seu formulário deve estar selecionada por padrão. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | assert($('input[type="checkbox"]').prop('checked')); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-10-18 08:17:43 -07:00
										 |  |  | Você não deve alterar o texto interno da etiqueta `Indoor`. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | assert.equal(document.querySelector('label[for="indoor"]')?.innerText?.trim(), 'Indoor'); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Você não deve alterar o texto interno da etiqueta `Loving`. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | assert.equal(document.querySelector('label[for="loving"]')?.innerText?.trim(), 'Loving'); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-06-15 03:34:20 +09:00
										 |  |  | # --seed--
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## --seed-contents--
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```html | 
					
						
							|  |  |  | <h2>CatPhotoApp</h2> | 
					
						
							|  |  |  | <main> | 
					
						
							|  |  |  |   <p>Click here to view more <a href="#">cat photos</a>.</p> | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-09-22 08:34:59 -07:00
										 |  |  |   <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> | 
					
						
							| 
									
										
										
										
											2021-06-15 03:34:20 +09:00
										 |  |  | 
 | 
					
						
							|  |  |  |   <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> | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-09-22 08:34:59 -07:00
										 |  |  |   <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> | 
					
						
							| 
									
										
										
										
											2021-06-15 03:34:20 +09:00
										 |  |  | 
 | 
					
						
							|  |  |  |   <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> | 
					
						
							|  |  |  | ``` |