تغيير صور زر الراديو بواسطة الجافا سكريبت

القيام بتغيير صورة زر الراديو عندما يتم النقر فوق زر راديو آخر في HTML يتطلب استخدام الجافا سكريبت لتحديد الزر الذي تم النقر عليه وتغيير صورته وصور الأزرار الأخرى بناءً على ذلك. في الأسفل، سأوضح كيفية تحقيق هذا الهدف باستخدام جافا سكريبت.

أولاً، ينبغي عليك تضمين الجافا سكريبت في صفحتك HTML. يمكنك القيام بذلك عن طريق إضافة الكود التالي داخل عنصر :

htmlCopy code
<script>
    function changeImage(radioButton) {
        var radios = document.getElementsByName("option");

        for (var i = 0; i < radios.length; i++) {
            if (radios[i] != radioButton) {
                radios[i].nextElementSibling.src = "http://i.imgur.com/RcuPIGF.png";
            }
        }

        radioButton.nextElementSibling.src = "https://www.example.com/your-checkmark-image.png";
    }
script>

ثم يجب عليك تغيير الوظيفة المرتبطة بزر الراديو كما يلي:

htmlCopy code
<input type="radio" name="option" value="option1" onclick="changeImage(this)"> Option 1
<input type="radio" name="option" value="option2" onclick="changeImage(this)"> Option 2
<input type="radio" name="option" value="option3" onclick="changeImage(this)"> Option 3

تغيير هذا الكود يؤدي إلى تحديث الصورة المرتبطة بالزر الذي تم النقر عليه لتكون صورة علامة الاختيار، ويقوم بتغيير الأزرار الأخرى لتكون صورة علامة الاكس.

يرجى تغيير الرابط الموجود في الكود السابق “https://www.example.com/your-checkmark-image.png” إلى الرابط الذي يشير إلى صورة علامة الاختيار الخاصة بك. يمكنك استخدام الرابط الموجود في طلبك الأصلي أو استخدام صورة أخرى إذا كان لديك رابط مختلف.

أتمنى أن يكون هذا الشرح واضحا ومفيدا! إذا كانت لديك أي أسئلة إضافية، فلا تتردد في طرحها.

بالطبع، دعني أوضح المزيد من التفاصيل حول الكود وكيفية عمله.

في الكود السابق، لدينا وظيفة changeImage التي تتلقى زر الراديو الذي تم النقر عليه كمعلمة. ثم، يتم استخدام document.getElementsByName("option") للعثور على جميع الأزرار التي لها نفس الاسم (الذي هو “option” في هذه الحالة). يتم تخزين هذه الأزرار في مصفوفة.

بعد ذلك، يتم تمرير عبر كل عنصر في المصفوفة وفحصه. إذا كان العنصر الحالي ليس هو الزر الذي تم النقر عليه، يتم تغيير الصورة المرتبطة به لتصبح صورة علامة الاكس. يتم ذلك باستخدام nextElementSibling للعثور على العنصر الفرعي الذي يلي الزر في شجرة العناصر DOM، وتغيير القيمة src لهذا العنصر إلى رابط صورة علامة الاكس.

أخيرًا، يتم تغيير صورة الزر الذي تم النقر عليه لتكون صورة علامة الاختيار. يتم ذلك بنفس الطريقة، باستخدام nextElementSibling للعثور على العنصر الفرعي الذي يلي الزر في شجرة العناصر DOM، وتغيير القيمة src لهذا العنصر إلى الرابط المحدد لصورة علامة الاختيار.

بهذه الطريقة، يتم تحقيق الهدف المطلوب، وهو تغيير صورة الأزرار الأخرى إلى علامة الاكس عندما يتم النقر فوق زر الراديو.