اصلاح کد js برای نمایش div هنگام کلیک روی چک باکس ها

سلام
فرض کنین 7 تا چک باکس داریم.
میخوام وقتی روی هر چک باکس کلیک شد یه div زیرش نمایش داده بشه
خب من آیدی چک باکس ها را اینجوری نوشتم
day1
day2
day3
تا 7
آیدی باکس های نمایشی هم اینجوری نوشتم
day1TimeBox
day2TimeBox
تا 7

خب کد زیر را برای نمایش گذاشتم ولی با کد زیر باید برای هر چک باکس یک بار این کد را با آیدی جدید بنویسم که این مورد درست نیست
چطور باید کد اصلاح بشه که آیدی ها را اتوماتیک بشناسه ؟

 const checkbox = document.getElementById('day1');
        const box = document.getElementById('day1TimeBox');
        checkbox.addEventListener('click', function handleClick() {
            if (checkbox.checked) {
                box.style.display = '';
            } else {
                box.style.display = 'none';
            }
        });

ثبت پرسش جدید

Banana Life

@shift.delete 2 سال پیش مطرح شد

سلام
دوست عزیزشما همین کد تون را داخل لوپ میکنید و به تعداد ایتیم ها به هر ای دی شماره میدید ؛ نمونه کد براتون نوشتم اون لوپ اخر چیزی است که میخواهید.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CheckBox</title>
    <style>
        html {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
            max-height: 100%;
        }

        .checkbox-container {
            padding-bottom: 10px;
        }

        .card {
            width: 200px;
            height: 100px;
            border: 10px;
            display: none;
            border: 1px solid rgb(12, 221, 124);
        }
    </style>
</head>

<body>
    <section>
        <div class="checkbox-container" id="checkbox-container">

        </div>
        <div class="div-container" id="div-container">

        </div>
    </section>
    <script type="text/javascript">

        const checkbox_container = document.getElementById("checkbox-container");
        const options = ["Option 1", "Option 2", "Option 3"];
        for (let i = 0; i < options.length; i++) {
            const checkbox = document.createElement("input");
            checkbox.type = "checkbox";
            checkbox.name = options[i];
            checkbox.id = `day`;
            checkbox.value = options[i];
            checkbox_container.appendChild(checkbox);
        }

        const div_container = document.getElementById("checkbox-container");
        const days = ["day 1", "day 2", "Day 3"];
        for (let i = 0; i < days.length; i++) {
            const div = document.createElement("div");
            div.className = "card";
            div.innerHTML = days[i];
            div.id = `dayTimeBox`;
            div_container.appendChild(div);
        }

        let checkbox = document.querySelectorAll("#day");
        let box = document.querySelectorAll("#dayTimeBox");
        for (let i = 0; i < options.length; i++) {
            checkbox[i].addEventListener('click', () => {
                checkbox[i].checked ?
                    box[i].style.display = 'block'
                    :
                    box[i].style.display = 'none';
            });
        }

    </script>
</body>

</html>

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

اصلاح کد js برای نمایش div هنگام کلیک روی چک باکس ها

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید