freeCodeCamp/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-ca.../5ef9b03c81a63668521804e5.md

3.8 KiB

id title challengeType dashedName
5ef9b03c81a63668521804e5 Paso 60 0 step-60

--description--

Para hacer que un checkbox o un radio button este seleccionado por defecto, necesitas añadir el atributo checked. No hay necesidad de agregarle un valor al atributo checked. Simplemente necesitas añadir la palabra checked al elemento input, asegurándote de que hay espacios entre ella y los otros atributos.

Haz que el primer radio button y el primer checkbox estén seleccionados por defecto.

--hints--

Asegúrate de que todavía hay dos radio button y tres checkbox anidados en sus respectivos elementos fieldset.

assert(
  $('input[type="radio"]').length === 2 &&
    $('fieldset > input[type="checkbox"]').length === 3
);

Al primer radio button le falta el atributo checked.

assert($('input[type="radio"]')[0].hasAttribute('checked'));

El segundo radio button no debe tener el atributo checked.

assert(!$('input[type="radio"]')[1].hasAttribute('checked'));

Al primer checkbox le falta el atributo checked.

assert($('input[type="checkbox"]')[0].hasAttribute('checked'));

El segundo checkbox no debe tener el atributo checked.

assert(!$('input[type="checkbox"]')[1].hasAttribute('checked'));

El tercer checkbox no debe tener el atributo checked.

assert(!$('input[type="checkbox"]')[2].hasAttribute('checked'));

--seed--

--seed-contents--

<html>
  <body>
    <h1>CatPhotoApp</h1>
    <main>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
--fcc-editable-region--
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>
            <legend>What's your cat's personality?</legend>
            <input id="loving" type="checkbox" name="personality" value="loving"> <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic"> Energetic</label>
          </fieldset>
--fcc-editable-region--
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>