| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | id: bad87fee1348bd9aedd08835 | 
					
						
							|  |  |  | title: Check Radio Buttons and Checkboxes by Default | 
					
						
							|  |  |  | challengeType: 0 | 
					
						
							| 
									
										
										
										
											2019-12-26 20:05:59 +08:00
										 |  |  | videoUrl: 'https://scrimba.com/p/pVMPUv/cWk3Qh6' | 
					
						
							|  |  |  | forumTopicId: 301094 | 
					
						
							|  |  |  | localeTitle: 给单选按钮和复选框添加默认选中项 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Description
 | 
					
						
							| 
									
										
										
										
											2019-12-26 20:05:59 +08:00
										 |  |  | <section id='description'> | 
					
						
							|  |  |  | 如果想设置某个单选按钮或多选按钮默认被选中,只需给<code>input</code>元素添加 "checked" 属性。 例如: | 
					
						
							|  |  |  | <code><input type="radio" name="test-name" checked></code> | 
					
						
							|  |  |  | </section> | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							|  |  |  | ## Instructions
 | 
					
						
							| 
									
										
										
										
											2019-12-26 20:05:59 +08:00
										 |  |  | <section id='instructions'> | 
					
						
							|  |  |  | 把第一个<code>radio button</code>和第一个<code>checkbox</code>都设置为默认选中。 | 
					
						
							|  |  |  | </section> | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							|  |  |  | ## Tests
 | 
					
						
							|  |  |  | <section id='tests'> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```yml | 
					
						
							|  |  |  | tests: | 
					
						
							| 
									
										
										
										
											2019-12-26 20:05:59 +08:00
										 |  |  |   - text: '表单的第一个单选按钮应该被默认选中。' | 
					
						
							|  |  |  |     testString: assert($('input[type="radio"]').prop("checked")); | 
					
						
							|  |  |  |   - text: '表单的第一个多选按钮应该被默认选中。' | 
					
						
							|  |  |  |     testString: assert($('input[type="checkbox"]').prop("checked")); | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  | 
 | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </section> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Challenge Seed
 | 
					
						
							|  |  |  | <section id='challengeSeed'> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <div id='html-seed'> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```html | 
					
						
							|  |  |  | <h2>CatPhotoApp</h2> | 
					
						
							|  |  |  | <main> | 
					
						
							| 
									
										
										
										
											2019-12-26 20:05:59 +08:00
										 |  |  | <p>点击查看更多<a href="#">猫咪图片</a>。</p> | 
					
						
							|  |  |  |    | 
					
						
							|  |  |  |   <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a> | 
					
						
							|  |  |  |    | 
					
						
							|  |  |  |   <p>猫咪最喜欢的三件东西:</p> | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |   <ul> | 
					
						
							| 
									
										
										
										
											2019-12-26 20:05:59 +08:00
										 |  |  |     <li>猫薄荷</li> | 
					
						
							|  |  |  |     <li>激光笔</li> | 
					
						
							|  |  |  |     <li>千层饼</li> | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |   </ul> | 
					
						
							| 
									
										
										
										
											2019-12-26 20:05:59 +08:00
										 |  |  |   <p>猫咪最讨厌的三件东西:</p> | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |   <ol> | 
					
						
							| 
									
										
										
										
											2019-12-26 20:05:59 +08:00
										 |  |  |     <li>跳蚤</li> | 
					
						
							|  |  |  |     <li>打雷</li> | 
					
						
							|  |  |  |     <li>同类</li> | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |   </ol> | 
					
						
							| 
									
										
										
										
											2020-07-15 02:55:06 -07:00
										 |  |  |   <form action="https://freecatphotoapp.com/submit-cat-photo"> | 
					
						
							| 
									
										
										
										
											2019-12-26 20:05:59 +08:00
										 |  |  |     <label><input type="radio" name="indoor-outdoor">室内</label> | 
					
						
							|  |  |  |     <label><input type="radio" name="indoor-outdoor">室外</label><br> | 
					
						
							|  |  |  |     <label><input type="checkbox" name="personality">忠诚</label> | 
					
						
							|  |  |  |     <label><input type="checkbox" name="personality">懒惰</label> | 
					
						
							|  |  |  |     <label><input type="checkbox" name="personality">积极</label><br> | 
					
						
							|  |  |  |     <input type="text" placeholder="猫咪图片地址" required> | 
					
						
							|  |  |  |     <button type="submit">提交</button> | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |   </form> | 
					
						
							|  |  |  | </main> | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </section> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Solution
 | 
					
						
							|  |  |  | <section id='solution'> | 
					
						
							|  |  |  | </section> | 
					
						
							| 
									
										
										
										
											2019-12-26 20:05:59 +08:00
										 |  |  |                |