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

おそらくこれを行う必要があります：

$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 に答える
0

あなたの解決策は、ラジオボタンの代わりにチェックボックスを使用することです。チェックボックスを使用する場合、JavaScript は必要ありません。

ラジオ ボタンの選択を解除する場合は、そのselected属性を削除する必要があります。:checkedチェックボックスにのみ適用されます。

于 2013-03-05T16:46:46.930 に答える