addClass 하나 이상의 확인란 입력이 "확인"되어 있으면 아무 것도 선택하지 않은 경우 removeClass를 입력하십시오.

Question

목록의 확인란 입력 (최소 1 개 이상)을 선택했는지에 따라 jQuery 명령을 실행하려고합니다. 본질적으로, 나는 어떤 체크 박스가 체크 되어도 다른 요소를 활성화시키고 있지만, 0 체크 박스가 체크되면 그 액티브 상태/클래스를 사라지게하고 싶다. 초기 문이 하나의 방법 (활성 클래스를 추가), 나는 상자의 선택을 취소하는 순간을 작동하는 경우 있지만 그것은 removeClass 명령을 실행

$('#data.backup input.backup').change(function() { 
    if ($(this).is(":checked")) { 
    $('#sticky-button.backup').addClass("active"); 
    } else { 
    $('#sticky-button.backup').removeClass("active"); 
    } 
}); 

:

여기에 내 현재 jQuery의. else 문은 입력을 확인하지 않을 때만 실행되도록 코드를 조정할 수 있습니까? 모든 체크 박스가

var boxes = $('#data.backup input.backup'); 

boxes.on('change', function() { 
    if (boxes.is(":checked")) { 
     $('#sticky-button.backup').addClass("active"); 
    } else { 
     $('#sticky-button.backup').removeClass("active"); 
    } 
}); 

를 확인하는 경우

Answer 1

확인 대신 this의 전체 컬렉션, is() 당신은

var boxes = $('#data.backup input.backup'); 

boxes.on('change', function() { 
    $('#sticky-button.backup').toggleClass("active", boxes.is(":checked")); 
}); 

FIDDLE

Answer 2

var $allInputs = $('#data.backup input.backup'); 

$allInputs.change(function() 
{ 
    if ($allInputs.is(":checked")) 
     $('#sticky-button.backup').addClass("active"); 

    else 
     $('#sticky-button.backup').removeClass("active"); 
}); 

Answer 3

toggleClass으로 단축 할 수 true를 돌려줍니다사용3210을 선택하고 checked 체크 박스의 길이를 확인하십시오.

$("#data.backup input.backup").change(function() 
{ 
    $("#sticky-button.backup").toggleClass("active", $("input.backup:checked").length > 0); 
}); 

FIDDLE

Answer 4

당신은 하나 (변경)에 체크되지 않은 때 이상 모든 상자를 반복하는 것을 필요로하고 여전히 확인 된 경우에, 당신이 사용하는 jQuery의 작업을 수행 할 수 있습니다 볼 것은 $ .each 기능을 제공 :

$('#data.backup input.backup').change(function() { 
    if ($(this).is(":checked")) { 
     $('#sticky-button.backup').addClass("active"); 
    } else { 
     var areAnyChecked = false; 

     $('#data.backup input.backup').each(function() { 
      if ($(this).is(":checked")) { 
       areAnyChecked = true; 
      }); 
     }); 

     if(areAnyChecked != true) { 
      $('#sticky-button.backup').removeClass("active"); 
     } 
    } 
}); 

Answer 5

$('#data.backup input.backup').change(function() { 
    if ($(this).is(":checked")) { 
    $('#sticky-button.backup').addClass("active"); 
    } else { 
     var flag=0; 
     $('#data.backup input.backup').each(function(){ 
      if ($(this).is(":checked")) { 
       $('#sticky-button.backup').addClass("active"); 
      flag=1;    
      } 
      if(flag == 0){ 
       $('#sticky-button.backup').removeClass("active"); 
      } 
     }); 
    } 
});