checkbox에서 jquery/javascript 수행 기능 클릭 또는 인접한 텍스트 클릭

Question

나는 각각의 옆에 체크 박스가있는 텍스트 항목의 정렬되지 않은 목록이 있습니다. 확인란을 선택/선택 취소하고 텍스트를 클릭 할 때도 동일한 기능을 수행하려고합니다.

HTML을

<li><input type="checkbox" class="cbox" name="adwords_list[]" value="shave club" ><p class="term"> shave club</p></li> 

JS

$(function() { 
    $('ol.phrases li .term').click(function() { 
     $cboxStatus = $(this).parent().find('.cbox').prop('checked'); 

     if ($cboxStatus) { 
      $(this).parent().find('.cbox').prop('checked', false); 
     } else { 
      $(this).parent().find('.cbox').prop('checked', true); 
     } 
    }); 
}); 

$(':checkbox, .term').on('change', function() { 
    console.log($(this).prop('checked')); 
}); 

용어를 클릭하면 on.change 함수가 호출되지 않습니다

는 여기에 내가 지금 무슨이다. 어떤 요소가 클릭/변경 되더라도 체크 된 상태를 정확하게 나타 내기 위해 무엇을 할 수 있습니까?

Answer 1

p.term 요소를 label으로 변경하고 적절한 for 특성이 해당 확인란과 일치하는 경우 해당 텍스트를 클릭하는 것은 상자를 선택하는 것과 같습니다. 그런 다음 체크 박스 이벤트 만보기 만하면됩니다. 당신이 p 태그의 스타일을 일치해야하는 경우

<input type="checkbox" class="cbox" name="adwords_list[]" value="shave club" id="cb1" /> 
<label class="term" for="cb1"> shave club</label> 

당신은 당신의 CSS에

.term { 
    display: block; 
} 

등을 추가 할 수 있습니다.