3.9 KiB
3.9 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
bad87fee1348bd9aedf08835 | Create a Set of Checkboxes | 0 | قم بإنشاء مجموعة من مربعات الاختيار |
Description
checkboxes
للأسئلة التي قد تحتوي على أكثر من إجابة واحدة. مربعات الاختيار هي نوع من input
يمكن دمج كل مربعات الاختيار داخل عنصر label
الخاص بها. من خلال لف عنصر input
داخل عنصر label
، سيقوم تلقائيًا بربط إدخال مربع الاختيار مع عنصر التسمية المحيط به. يجب أن تحتوي جميع مدخلات خانة الاختيار ذات الصلة على سمة name
نفسه. فهو يعتبر أفضل الممارسات لتحديد بشكل واضح على العلاقة بين مربع input
والمناظرة label
عن طريق تعيين for
سمة على label
عنصر لتتناسب مع id
سمة من يرتبط input
عنصر. في ما يلي مثال على مربع اختيار: <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
Instructions
label
الخاص به. يجب على جميع الثلاثة تقاسم سمة name
personality
. Tests
tests:
- text: يجب أن تحتوي صفحتك على ثلاثة عناصر من خانة الاختيار.
testString: 'assert($("input[type="checkbox"]").length > 2, "Your page should have three checkbox elements.");'
- text: يجب أن يكون كل عنصر من عناصر خانة الاختيار الثلاثة متداخلاً في عنصر <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: تأكد من أن كل عنصر من عناصر <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>name</code> <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