클릭시 클래스 제거 및 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/

어떤 문제가 ? 귀하의 솔루션은 체크 박스를 대신 사용하는 것입니다

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

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

당신은 이벤트 처리기가 필요 라디오 버튼. 확인란을 사용할 때 자바 스크립트가 필요 없습니다.

라디오 버튼을 선택 해제하려면 selected 속성을 제거해야합니다. :checked은 체크 박스에만 적용됩니다.

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

를 참조하십시오

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/