라벨 클릭 + 체크 박스 클릭 처리 방법?

Question

확인란을 클릭하면 의도 한대로 작동하면서 양식에 일부 유효성 검사가 실행됩니다.

$('#ilikeicecream').click(function(){ 
    runValidation(); 
}); 

확인란도 레이블 요소가 있으므로이를 확인해야합니다.

$('#ilikeicecream-label').click(function(){ 
    runValidation(); 
}); 

문제는 의도 한대로 유효성 검사가 작동하지 않도록 확인란이 시점에서 확인되지 않은 것입니다 : 내 첫 번째 본능은 다음을 수행하는 것이 었습니다. 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

사용 change() : 선택 상자를 들어

$('#ilikeicecream').change(function(){ 
    runValidation(); 
}); 

, 체크 박스, 라디오 버튼, 이벤트는 사용자가 마우스로 선택을하게 즉시 때 을 발사하지만, 다른 요소입니다 이벤트가 지연되면 요소가 포커스를 잃을 때까지 지연됩니다.

---

나는 다음과 같은 코드로 jsFiddle에서 테스트했습니다. jsfiddle이 현재 다운되었으므로 링크를 제공 할 수 없습니다.

---

이 작동하지 않는 경우

<label for="ilikeicecream">sdsd</label><input id="ilikeicecream" type="checkbox" /> 

$('#ilikeicecream').change(function(){ 
    alert("test"); 
}); 

는, 아마도 당신은 input 일치하도록 label에 for 속성을 지정하지 않았습니다.

Answer 2

$('#ilikeicecream-label').click(function(){ 
    // Swap the checked property value of the check box here 
    runValidation(); 
}) 

Answer 3

태그를 <label> 태그로 감싸기 만하면됩니다. 당신이 라벨 체크 박스를 클릭하면 자동으로 변경하므로 runValidation() 함수를 호출 할 수있는 change 이벤트가 발생합니다. 이 당신을 위해 작동합니다

Answer 4

<label><input type="checkbox" value="1" id="blahblah" name="myname" /></label> 

그리고 체크 박스에 .change 핸들러 (당신은 레이블에 대해 별도의 하나 필요하지 않습니다) 계속 ... ...

$('#ilikeicecream').change(function(){ 
    runValidation(); 
}); 

$('#ilikeicecream-label').click(function(){ 
    if($('#ilikeicecream').attr('checked')){ 
      $('#ilikeicecream').attr('checked', false); 
    } 
    else{ 
      $('#ilikeicecream').attr('checked', true); 
    } 
    runValidation(); 
});