freeCodeCamp

4.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd9aedf08834	Create a Set of Radio Buttons	0		创建一组单选按钮

Description

您可以使用radio buttons来解决您希望用户仅从多个选项中给出一个答案的问题。单选按钮是一种input 。每个单选按钮都可以嵌套在自己的label元素中。通过将input元素包装在label元素内部，它将自动将单选按钮输入与其周围的标签元素相关联。所有相关的单选按钮应具有相同的name属性以创建单选按钮组。通过创建无线电组，选择任何单个单选按钮将自动取消选择同一组内的其他按钮，确保用户只提供一个答案。这是一个单选按钮的示例：

<标签>
<input type =“radio”name =“indoor-outdoor”>室内
</标签>

最佳做法是在label元素上设置for属性，其值与input元素的id属性值相匹配。这允许辅助技术在标签和子input元素之间创建链接关系。例如：

<label for =“室内”>
<input id =“indoor”type =“radio”name =“indoor-outdoor”>室内
</标签>

Instructions

在表单中添加一对单选按钮，每个按钮都嵌套在自己的标签元素中。一个应该有indoor选择，另一个应该可以选择outdoor 。两者都应该共享indoor-outdoor的name属性来创建一个无线电组。

Tests

tests:
  - text: 您的页面应该有两个单选按钮元素。
    testString: 'assert($("input[type="radio"]").length > 1, "Your page should have two radio button elements.");'
  - text: 为您的单选按钮提供<code>indoor-outdoor</code>的<code>name</code>属性。
    testString: 'assert($("label > input[type="radio"]").filter("[name="indoor-outdoor"]").length > 1, "Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.");'
  - text: 两个单选按钮元素中的每一个都应嵌套在自己的<code>label</code>元素中。
    testString: 'assert($("label > input[type="radio"]:only-child").length > 1, "Each of your two radio button elements should be nested in its own <code>label</code> element.");'
  - text: 确保每个<code>label</code>元素都有一个结束标记。
    testString: 'assert((code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length), "Make sure each of your <code>label</code> elements has a closing tag.");'
  - text: 您的一个单选按钮应该是<code>indoor</code>标签。
    testString: 'assert($("label").text().match(/indoor/gi), "One of your radio buttons should have the label <code>indoor</code>.");'
  - text: 您的一个单选按钮应该是<code>outdoor</code>标签。
    testString: 'assert($("label").text().match(/outdoor/gi), "One of your radio buttons should have the label <code>outdoor</code>.");'
  - text: 应在<code>form</code>标记中添加每个单选按钮元素。
    testString: 'assert($("label").parent().get(0).tagName.match("FORM"), "Each of your radio button elements should be added within the <code>form</code> tag.");'

Challenge Seed

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" 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="/submit-cat-photo">
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Solution

// solution required

4.2 KiB Raw Blame History