3.7 KiB
3.7 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
bad87fee1348bd9aedf08835 | Create a Set of Checkboxes | 0 | Criar um conjunto de caixas de seleção |
Description
checkboxes
de checkboxes
para perguntas que podem ter mais de uma resposta. Caixas de seleção são um tipo de input
Cada uma de suas caixas de seleção pode ser aninhada em seu próprio elemento de label
. Ao envolver um elemento de input
dentro de um elemento de label
, ele associará automaticamente a entrada da caixa de seleção ao elemento de rótulo que a envolve. Todas as entradas da caixa de seleção relacionadas devem ter o mesmo atributo de name
. É considerada a melhor prática definir explicitamente o relacionamento entre uma input
caixa de seleção e seu label
correspondente label
definindo o atributo for
no elemento label
para corresponder ao atributo id
do elemento de input
associado. Aqui está um exemplo de uma caixa de seleção: <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
Instructions
label
. Todos os três devem compartilhar o atributo do name
da personality
. Tests
tests:
- text: Sua página deve ter três elementos de caixa de seleção.
testString: 'assert($("input[type="checkbox"]").length > 2, "Your page should have three checkbox elements.");'
- text: Cada um dos três elementos da caixa de seleção deve estar aninhado em seu próprio elemento <code>label</code> .
testString: 'assert($("label > input[type="checkbox"]:only-child").length > 2, "Each of your three checkbox elements should be nested in its own <code>label</code> element.");'
- text: Certifique-se de que cada um dos elementos da <code>label</code> tenha uma tag de fechamento.
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: Dê a suas caixas de seleção o atributo de <code>name</code> da <code>personality</code> .
testString: 'assert($("label > input[type="checkbox"]").filter("[name="personality"]").length > 2, "Give your checkboxes the <code>name</code> attribute of <code>personality</code>.");'
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">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
Solution
// solution required