3.9 KiB
3.9 KiB
id | title | localeTitle | challengeType | videoUrl |
---|---|---|---|---|
bad87fee1348bd9aedf08835 | Create a Set of Checkboxes | Crear un conjunto de casillas de verificación | 0 |
Description
checkboxes
de checkboxes
para preguntas que pueden tener más de una respuesta.
casillas de verificación son un tipo de input
Cada una de sus casillas de verificación se puede anidar dentro de su propio elemento de label
. Al ajustar un elemento de input
dentro de un elemento de label
, asociará automáticamente la entrada de la casilla de verificación con el elemento de etiqueta que lo rodea.
Todas las entradas de las casillas de verificación relacionadas deben tener el mismo atributo de name
.
Se considera una buena práctica definir explícitamente la relación entre una input
casilla de verificación y su label
correspondiente estableciendo el atributo for
en el elemento de label
para que coincida con el atributo id
del elemento de input
asociado.
Aquí hay un ejemplo de una casilla de verificación:
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
Instructions
label
. Los tres deben compartir el atributo de name
de la personality
.
Tests
tests:
- text: Su página debe tener tres elementos de casilla de verificación.
testString: 'assert($("input[type="checkbox"]").length > 2, "Your page should have three checkbox elements.");'
- text: Cada uno de sus tres elementos de casilla de verificación debe estar anidado en su propio elemento <code clase = "notranslate"> etiqueta </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: Asegúrese de que cada uno de sus elementos <code class = "notranslate"> label </code> tenga una etiqueta de cierre.
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 sus casillas de verificación el atributo <code clase = "notranslate"> nombre </code> de <code clase = "notranslate"> personalidad </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