Удалите класс по клику и снимите выделение с JQuery

Question

У меня есть элемент списка с переключателем ввода в каждом, при нажатии на элемент списка вход проверяется. Однако, если нажать снова, я хочу удалить класс и отменить выбор опции. Однако я не могу заставить что-либо работать.

function setupToptions() {
    if ($('ul.top-options input').length) {
        $('ul.top-options li').each(function(){ 
            $(this).removeClass('active');
        });
        $('ul.top-options li input:checked').each(function(){ 
            $(this).parent('li').addClass('active');
        });                
    };
};

http://jsfiddle.net/BKgdc/4/

Что случилось?

Answer 1

  $('ul.top-options li input[type=radio]').click(function() {
     if(!$(this).closest('li').hasClass('active')){
         $('ul.top-options li').removeClass('active');
         $(this).closest('li').addClass('active');
     }else
         $(this).removeAttr('checked').closest('li').removeClass('active');
});

http://jsfiddle.net/BKgdc/8/

Answer 2

Вам нужно иметь обработчик событий:

$('ul.top-options input').change(function(){
    if ($('ul.top-options input').length) {
        $('ul.top-options li').each(function(){ 
            $(this).removeClass('active');
        });
        $('ul.top-options li input:checked').each(function(){ 
            $(this).parent('li').addClass('active');
        }); 
     }
});

но ваш код может быть упрощен как

$('ul.top-options input').change(function(){
     $('ul.top-options li').removeClass('active');
     $('ul.top-options li input:checked').parent('li').addClass('active');
});

Смотрите демонстрацию

Answer 3

Ваше решение было бы использовать флажки вместо переключателей. Нет необходимости в каком-либо JavaScript при использовании флажков.

Если вы хотите отменить выбор радиокнопки, вы должны удалить ее selected приписывать. :checked применяется только к флажкам.

Answer 4

$(document).ready(function() {

    $li = $('ul.top-options li');
    $li.click(function() {
        if(!$(this).hasClass('active')){
        $li.removeClass('active')
        .filter(this).addClass('active').find('input').prop('checked', true);
        } else {
            $(this).removeClass('active');
            $(this).find('input').prop('checked', false);
        }
    });
    $li.filter(':has(:checked)').click();

});

Answer 5

Скорее всего, вам нужно сделать это:

$li = $('ul.top-options li');
$li.click(function () {
    var self = $(this);
    $li.not(self).removeClass('active');
    (self.hasClass('active') ? (self.removeClass('active').find('input').prop('checked', false)) : (self.addClass('active').find('input').prop('checked', true)));
});
$li.filter(':has(:checked)').click();

альтернативная условная форма:

$li = $('ul.top-options li');
$li.click(function () {
    var self = $(this);
    $li.not(self).removeClass('active');
    if (self.hasClass('active')) {
        self.removeClass('active').find('input').prop('checked', false);
    } else {
        self.addClass('active').find('input').prop('checked', true);
    }
});
$li.filter(':has(:checked)').click();

скрипку, чтобы показать в действии: http://jsfiddle.net/ZK4th/