Как сделать переключатель с такими же свойствами флажка, используя jQuery - PullRequest
Новая
       32

Как сделать переключатель с такими же свойствами флажка, используя jQuery

0 голосов
/ 20 июня 2011

Мой HTML-код 

  <table>
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
   </table>

Мой код JQuery (не написан мной, мне помогло использование Stackoverflow, я ему благодарен) 

     $('TABLE TBODY TR').each(function()     
      {       
       var lastd =    $(this).children('tr td:last').find('input:checkbox');    
       var parentlast =   lastd.parent();       
       lastd.remove();           
       parentlast.append("<input type='radio'>"); // want to add the same properties of the removed checkbox     
      });

Пожалуйста, кто-нибудьпомоги мне.

Ответы [ 3 ]

2 голосов
/ 20 июня 2011

Ну, я не понимаю, почему вы хотели бы сделать это, но вы могли бы просто сделать так, чтобы он стал переключателем. 

$('tr:last td:last input:checkbox').prop('type', 'radio');

(в этом примере используется jQuery 1.6)

JsFiddle Demo

ОБНОВЛЕНИЕ: Как правильно заметил @kei, этот не будет работать IE <9.Итак, я создал это: </p> 

var $csekk=$('tr:last td:last input:checkbox'),
    $klon=$csekk.clone().attr('type', 'radio');

$csekk.after($klon).remove();

JsFiddle Demo

Этот в основном клонирует флажок (чтобы сохранить каждый атрибут, который вы могли связать с ним), изменитьклон в радио, вставляет и удаляет старый.

1 голос
/ 20 июня 2011

Надеюсь, это решит вашу проблему. 

 $('TABLE TBODY TR').each(function()
    {  
    var lastd =    $(this).children('tr td:last').find('input:checkbox');  
     var parentlast =   lastd.parent();
      lastd.remove();     
      parentlast.append("<input type='radio'>");

    });

Таким образом, в основном он найдет последний флажок, удалит его из домена и создаст новый

0 голосов
/ 20 июня 2011

Вот плагин и учебное пособие для настройки переключателей и флажков с помощью jQuery, CSS и спрайтов изображений.

Доступные, специально разработанные входы для флажков и переключателей, стилизованные под CSS (и штрих jQuery)

Поскольку вы будете использовать созданные пользователем спрайты, вы можете просто заставить их выглядеть как угодно.

...