본문의 아무 곳이나 클릭하여 선택을 취소하고 레이블을 클릭하여 토글합니다.

Question

그래서 확인란과 레이블이 있습니다. 본문의 다른 곳을 클릭하면 레이블을 클릭하여 체크 박스 상태를 토글해야합니다. 아래 코드의 문제는 레이블을 클릭하여 확인란을 선택 취소 할 수 없다는 것입니다.

$(function() { 
 
    "use strict"; 
 
    
 
    function uncheckBox() { 
 
    var isChecked = $("#cbox").prop("checked"); 
 
    if (isChecked) { 
 
     $("#cbox").prop("checked", false); 
 
    } 
 
    } 
 
    
 
    $("body").on("click", function() { 
 
    uncheckBox(); 
 
    }); 
 
    
 
    $("#cbox").on("click", function (e) { 
 
    e.stopPropagation(); 
 
    }); 
 
});

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<input type="checkbox" id="cbox" value="checkbox"/> 
 
<label for="cbox">testbox</label>

Answer 1

정지도 라벨에서 발생하는 이벤트 버블 링, $("#cbox,label").click

$(function() { 
 
    "use strict"; 
 
    
 
    function uncheckBox() { 
 
    var isChecked = $("#cbox").prop("checked"); 
 
    if (isChecked) { 
 
     $("#cbox").prop("checked", false); 
 
    } 
 
    } 
 
    
 
    $("body").on("click", function() { 
 
    uncheckBox(); 
 
    }); 
 
    
 
    $("#cbox,label").on("click", function (e) { 
 
    e.stopPropagation(); 
 
    }); 
 
});

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<input type="checkbox" id="cbox" value="checkbox"/> 
 
<label for="cbox">testbox</label>