點擊刪除班級並取消選擇與JQuery輸入

我有一個單選按鈕輸入列表項，每次單擊列表項檢查輸入。但是，如果再次點擊，我想刪除該類並取消選擇該選項。然而，我似乎無法得到任何工作。點擊刪除班級並取消選擇與JQuery輸入

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/

有什麼不對？

來源

2013-03-05 Liam

WEL l，你的點擊處理程序在哪裏？ – 2013-03-05 16:38:01

正如@Jack所說;這裏沒有'click'處理程序。在上面的例子中，你'取消選擇'你的單選按鈕在哪裏？我相信你應該在使用單選按鈕時使用'selected'並刪除selected'屬性。您現在使用'checked'，僅適用於複選框 – 2013-03-05 16:42:55

@RobinvanBaalen - 不成立，請參閱此小提琴：http://jsfiddle.net/ZK4th/ – 2013-03-05 19:28:20

$('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/

來源

2013-03-05 16:58:16 Sam

'$（'ul.top-options li'）。removeClass（ 'active'）;'與'$（'ul.top-options li'）實際上是一樣的'each（function（）{$（this）.removeClass（'active'）;}）;'但應該更快 – 2013-03-05 19:09:41

真正的男人：D，我已經修復它 – Sam 2013-03-05 19:26:19

也應該是'removeProp'而不是'removeAttr' - 它被更改爲1.9+和「可能」在所有情況下都不起作用，如此處所述：http：// jquery。 com/upgrade-guide/1.9 /＃attr-prop- – 2013-03-05 19:31:29

你需要有一個事件處理程序：

$('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'); 
});

見demonstration

來源

2013-03-05 16:37:41

$(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(); 

});

來源

2013-03-05 16:45:03

你的解決辦法是使用複選框代替的單選按鈕。使用複選框時不需要任何JavaScript。

如果你想取消選擇一個單選按鈕，你應該刪除它的selected屬性。 :checked僅適用於複選框。

來源

2013-03-05 16:46:46

您可能會需要這樣做：

$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/

來源

2013-03-05 16:50:09

點擊刪除班級並取消選擇與JQuery輸入

回答

相關問題