| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | --- | 
					
						
							|  |  |  | id: bad87fee1348bd9aedd08835 | 
					
						
							|  |  |  | title: Check Radio Buttons and Checkboxes by Default | 
					
						
							|  |  |  | challengeType: 0 | 
					
						
							|  |  |  | videoUrl: 'https://scrimba.com/p/pVMPUv/cWk3Qh6' | 
					
						
							|  |  |  | --- | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Description
 | 
					
						
							|  |  |  | <section id='description'> | 
					
						
							|  |  |  | You can set a checkbox or radio button to be checked by default using the <code>checked</code> attribute. | 
					
						
							|  |  |  | To do this, just add the word "checked" to the inside of an input element. For example: | 
					
						
							|  |  |  | <code><input type="radio" name="test-name" checked></code> | 
					
						
							|  |  |  | </section> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Instructions
 | 
					
						
							|  |  |  | <section id='instructions'> | 
					
						
							| 
									
										
										
										
											2018-11-12 05:23:12 -05:00
										 |  |  | Set the first of your <code>radio button</code>s and the first of your <code>checkbox</code>es to both be checked by default. | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | </section> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Tests
 | 
					
						
							|  |  |  | <section id='tests'> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```yml | 
					
						
							| 
									
										
										
										
											2018-10-04 14:37:37 +01:00
										 |  |  | tests: | 
					
						
							|  |  |  |   - text: Your first radio button on your form should be checked by default. | 
					
						
							| 
									
										
										
										
											2018-10-20 21:02:47 +03:00
										 |  |  |     testString: assert($('input[type="radio"]').prop("checked"), 'Your first radio button on your form should be checked by default.'); | 
					
						
							| 
									
										
										
										
											2018-10-04 14:37:37 +01:00
										 |  |  |   - text: Your first checkbox on your form should be checked by default. | 
					
						
							| 
									
										
										
										
											2018-10-20 21:02:47 +03:00
										 |  |  |     testString: assert($('input[type="checkbox"]').prop("checked"), 'Your first checkbox on your form should be checked by default.'); | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | 
 | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </section> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Challenge Seed
 | 
					
						
							|  |  |  | <section id='challengeSeed'> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <div id='html-seed'> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```html | 
					
						
							|  |  |  | <h2>CatPhotoApp</h2> | 
					
						
							|  |  |  | <main> | 
					
						
							|  |  |  |   <p>Click here to view more <a href="#">cat photos</a>.</p> | 
					
						
							| 
									
										
										
										
											2018-10-08 01:01:53 +01:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  |   <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a> | 
					
						
							| 
									
										
										
										
											2018-10-08 01:01:53 +01:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01: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="/submit-cat-photo"> | 
					
						
							|  |  |  |     <label><input type="radio" name="indoor-outdoor"> Indoor</label> | 
					
						
							|  |  |  |     <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> | 
					
						
							|  |  |  |     <label><input type="checkbox" name="personality"> Loving</label> | 
					
						
							|  |  |  |     <label><input type="checkbox" name="personality"> Lazy</label> | 
					
						
							|  |  |  |     <label><input type="checkbox" name="personality"> Energetic</label><br> | 
					
						
							|  |  |  |     <input type="text" placeholder="cat photo URL" required> | 
					
						
							|  |  |  |     <button type="submit">Submit</button> | 
					
						
							|  |  |  |   </form> | 
					
						
							|  |  |  | </main> | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </section> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Solution
 | 
					
						
							|  |  |  | <section id='solution'> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | // solution required | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | </section> |