0

我有一个列表项，每个列表项都有一个单选按钮输入，单击列表项时会检查输入。但是，如果再次单击，我想删除该类并取消选择该选项。然而，我似乎无法得到任何工作。

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/

怎么了？

4

5 回答 5

2 
  $('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-05T16:58:16.830 回答
1

您需要有一个事件处理程序：

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

看演示

于 2013-03-05T16:37:41.863 回答
0 
$(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-05T16:45:03.940 回答
0

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

如果你想取消选择一个单选按钮，你应该删除它的selected属性。:checked仅适用于复选框。

于 2013-03-05T16:46:46.930 回答
0

您可能需要这样做：

$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-05T16:50:09.440 回答