-1

جافا سكربت : لماذا if checked لا يعمل ؟

ما الخطأ عندما تحاول التحقق ما إذا كان radio Button محدد أم لا ؟

input id='px10' type='radio' name='fontSize'>10px>

 <script type="text/javascript">
        var px10 = document.querySelector('#px10');
        if (px10.checked)
        alert('d');
    </script>
يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

1
assassinateur أضف ردا

لن يحدث شيء لأن radio ليس محددا عن تشغيل الصفحة، فكل ما سيحدث هو أن الجملة الشرطية سترجع false

غير 

input id='px10' type='radio' name='fontSize'>10px>

إلى input id='px10' type='radio' name='fontSize' checked='checked'>10px>

انظر هنا

0
it-pro أضف ردا

عند كتابة نفس الكود في Chrome Console ستجده يعمل. لذا أريدك أن تستخدم طريقتك في كتابة برنامج يحتوي على if و alert ... لأن الكود الذي ارفقته هو يقوم بتفعيل الزر فور تحديث الصفحة ولذلك سيعمل دون وجود شرط.

0
assassinateur أضف ردا

للآن لم أفهم ما تريده أنت بالتحديد

اشرح لي ماذا تريد وسأساعدك

0
it-pro أضف ردا

أنا اريد ان يكون الزر غير مفعل وعند النقر عليه لتفعيله تظهر رسالة alert أي بوجود if يحدث امر معين .. لم أستطع أن أفهم لماذا الكود يعمل في Chrome Console حسب ما كتبته في الموضوع ولكن عندما أكتبه داخل الصفحة لا يعمل ولا يعطي error ...

0
supercoder أضف ردا

لن يعمل لان كود javascript يعمل مرة واحدة عند فتح الصفحة عليك بعمل هذا 

 input id='px10' type='radio' onclick="myfun()" name='fontSize'>10px>

بحيث عند الضغط يستدعي الوظيفة myfun وسيكون كود javascript هكذا 

<script type="text/javascript">
 function myfun(){
      var px10 = document.querySelector('#px10');
      if (px10.checked)
     alert('d');
   }
 </script>
0
it-pro أضف ردا

هل قمت بتجربته ؟ لم يعمل معي؟

1
supercoder أضف ردا

ربما لم افهم ما تريد جرب هذا انسخه كما هو 

<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript">
            function myfun(){
            var px10 = document.querySelector('#px10');
            if (px10.checked)
                alert('d');
        }
        </script>
    </head>
<body>
    <input id='px10' type='radio' onclick="myfun()" name='fontSize'>
</body>
</html>
0
it-pro أضف ردا

نعم هذا ما كنت اجربه لكن طريقتي لم تفلح وهذه الطريقة تعمل

1
forabi أضف ردا

يجب أن تنصت لحدث تغيّر حالة زر Radio وتنفّذ أمرًا ما حينئذٍ.

أعتقد أنه يعمل في Chrome Console لأنّك تقوم بإدخال الأمر وتنفيذه بعد إضافة العنصر وتحديده وهذا يعني أن الشرط if (el.checked) محقّق في لحظة تنفيذ الشيفرة.

انظر هذا المثال:

(اضغط Run with JS إن لم يظهر التنبيه)

هل هذا ما تريده؟

0
it-pro أضف ردا

نعم بدون Listener في الكود الخاص لم افلح

0
محمد بندريوش أضف ردا

بـ jQuery

$('#element').click(function() {
if($('#radio_button').is(':checked')) { alert("it's checked"); }
});
0
it-pro أضف ردا

كان بالإمكاني أفعلها بـ jQuery لكن لا اريد. أنا اريد معرفة السبب لأن الكثير يسأل في موقع stackoverflow رغم أن الكود صحيح.

للعلم قمت بكتابة نفس الكود في Chrome Console ويعمل بشكل سليم أما بتضمينه في الصفحة لا يعمل.

0
rasheed أضف ردا

بطبيعة الحال لن يعمل لانه لم يتحقق الشرط لان input لايكون محدد عندما تفتح الصفحة اما ان قمت باضافة الخاصية checked=check سوف تعمل

<input type="radio" id="px10" checked="check">
0
it-pro أضف ردا

طيب كيف ممكن تعمل شرط عندما يقوم المستخدم بإختيار قيمة لنقل Male او Female ... سيظهر رسالة معينة ؟ هذا ما اقوم بتجربته الان ولا يعمل.

1
rasheed أضف ردا

هناك عدة طريق ابسطها هو التالي

<input type="radio" name="gender" value="male" onClick="getGender(this)">
<input type="radio" name="gender" value="female" onClick="getGender(this)">
<script>
    function getGender(elm){
         alert(elm.value)
    }
</script>
0
جهاد زنداح أضف ردا

السبب الرئيسي لعدم اظهار الرسالة هو ان السكربت يعمل لمرة واحد فقط. وفي حالتك هذه يكون ال radio button غير محدد عند تحميل الصفحة فبالتالي الشرط px10.checked لم ولن يتحقق وهنا ينتهي عمل السكربت. ولكن لكي تحصل على التأثير المطلوب يجب استخدام ال events و ال callback functions لكي يتمكن المتصفح من الإستماع لأي حدث ممكن ان يحصل لل radio button. وممكن القيام بذالك كالتالي:

10px

<script>
    var px10 = document.querySelector('#px10');

    function showMessage(){
        alert('d');
    }
    if(px10.addEventListener){
        px10.addEventListener("change",showMessage);
    }else{
        px10.attachEvent("change", showMessage);
    }

</script>