单击时删除类，并使用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/

怎么了？

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

 $(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 4

您的解决方案是使用复选框而不是单选按钮。 使用复选框时无需任何JavaScript。

如果要取消选择单选按钮，则应删除其selected属性。 :checked仅适用于复选框。

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

备用条件forms：

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