Radio Radio onchange تبديل فئة العنصر الأصل؟

Question

يرجى إلقاء نظرة على ما يلي:

$('#myRadio').change(function() {           

    if($(this).is(':checked'))  {
        $(this).parent().addClass('green');
    } else {                              
        $(this).parent().removeClass('green');
    }
});

تشبه العلامات إلى حد ما على النحو التالي

<table>
  <tr>
    <td>Some text 1 </td>
    <td><input type="radio" value="txt1" name="myRadio" id="text1" /></td>
    <td>Some text 2 </td>
    <td><input type="radio" value="txt2" name="myRadio" id="text2" /></td>
    <td>Some text 3 </td>
    <td><input type="radio" value="txt3" name="myRadio" id="text2" /></td>
  </tr>
</table>

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

كيف يمكنني أن أجعلها تعمل بحيث يغير اختيار خيار راديوي فئة الوالد TD إلى الأخضر واختيار آخر سيؤدي إلى إعادة تعيين الكل ولكن أضف الأخضر إلى المحدد حديثا!

هل يمكن أيضا تقديمها لتغيير فئة TD الأولى السابقة التي تحتوي على "بعض النص 3" إلخ؟

شكرا.

Answer 1

جرب شيئا مثل هذا:

if($(this).is(':checked'))  {
    $(this).parent().parent().parent().find('.green').removeClass('green');
    $(this).parent().addClass('green');
}

ستجد هذا عنصر جدول تجميع زر الراديو الحالي الخاص بك، ابحث عن أي عناصر مع الفئة الخضراء، وإزالة الفصل.

بدلا من ذلك، إذا كان لديك مجموعة زر راديو واحدة فقط في الصفحة، فسيكون الأمر أبسطا فقط

$('.green').removeClass('green');

Answer 2

يجب أن لا تستخدم حدث التغيير () على أزرار الراديو وخانات الاختيار. يتصرف قليلا مراوغة وغير متناسقة عبر المتصفحات (يسبب مشاكل في جميع إصدارات IE)

استخدم حدث Click () بدلا من ذلك (لا تقلق بشأن إمكانية الوصول، لأن حدث Click سينطلق أيضا إذا قمت بتنشيط / حدد زر راديو مع لوحة المفاتيح)

كما أشار الآخرون هنا، إعادة تعيين الأخضر سهل كذلك:

لذلك ببساطة تغيير التعليمات البرمجية الخاصة بك إلى

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parent().addClass('green');
    }
});

تحرير: على النحو المطلوب في التعليق، قم أيضا بتغيير TD السابق:

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parent().prev().andSelf().addClass('green');
    }
});

أو حتى أفضل، تحول جميع عناصر TD من الصف الأم الأخضر:

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parents("tr").find("td").addClass('green');
    }
});

Answer 3

جرب هذا:

if($(this).is(':checked')) {
    $(this).parent().siblings('td.green').removeClass('green');
    $(this).parent().addClass('green');
}

Answer 4

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

$('input[type="radio"]').change( function() {
    // grab all the radio buttons with the same name as the one just changed
    var this_radio_set = $('input[name="'+$(this).attr("name")+'"]');

    // iterate through each  
    // if checked, set its parent label's class to "selected"
    // if not checked, remove the "selected" class from the parent label
    // my HTML markup for each button is  <label><input type="radio" /> Label Text</label>
    // so that this works anywhere even without a unique ID applied to the button and label
    for (var i=0; i < this_radio_set.length;i++) {
        if ( $(this_radio_set[i]).is(':checked') ) $(this_radio_set[i]).parents('label').addClass('selected');
        else $(this_radio_set[i]).parents('label').removeClass('selected');
    }
});

Answer 5

اقتراحي هو:

$('#myRadio').change(function() {           
    _parent = $(this).parent();
    if($(this).is(':checked'))  {
       _parent.addClass('green');
    } else {                              
       _parent.removeClass('green');
    }
});

Answer 6

هنا هو الحل الذي عمل رائعا بالنسبة لي:

var $boxes=$('input:radio');
var $parents = $boxes.parent();
$boxes.click(function(){
    $parents.filter('.selected').removeClass('selected');
    $(this).parent().addClass('selected');
});
$boxes.filter(':checked').parent().addClass('selected');

سمات:

• بسرعة. يحدد فقط قائمة خانات الاختيار مرة واحدة.
• لا تعتمد على: فحص. لست متأكدا مما إذا كان هناك طلب معين سيتم فيه تنفيذ "النقر" و "تغيير" عبر المتصفحات.
• الاستعمالات: الراديو بدلا من [type = "راديو"] وهو مسج الموصى به
• يحدد الفصل على الوالد للقيمة الافتراضية لزر الراديو.

أتمنى أن يساعدك هذا!

Answer 7

أعتقد أن هذه هي الطريقة الأفضل وأكثر مرونة للقيام بذلك:

ننسى الجداول (تعرف Google العديد من السبب لذلك) واستخدام الأغلفة مثل أدناه

<div id="radio_wrapper">
    <span class="radio">
        <label for="myRadio1" class="myRadio">Some text 1 </label>
        <input type="radio" value="txt1" name="myRadio" id="myRadio1" class="myRadio" />
    </span>
    <span class="radio">
        <label for="myRadio2" class="myRadio">Some text 2 </label>
        <input type="radio" value="txt2" name="myRadio" id="myRadio2" class="myRadio" />
    </span>
    <span class="radio">
        <label for="myRadio3" class="myRadio">Some text 3 </label>
        <input type="radio" value="txt3" name="myRadio" id="myRadio3" class="myRadio" />
    </span>
</div

تنسيق مع CSS مثل هذا

span.radio {
    background-color: #cccccc;
}
span.currentGreen {
    background-color: #ccffcc;
}

واستخدام هذا البرنامج النصي يمكنك القيام به بالضبط كما تريد

$('.myRadio').change(function() {           
    $('.currentGreen').removeClass('currentGreen'); // remove from all
    if ($(this).is(':checked')) {
        $(this).parent().addClass('currentGreen'); // add to current
    }
});

لا أحب استخدام المرشح () والعثور عليه () لأنهم يستخدمون الموارد غير الضرورية في هذه الحالة.