本文の任意の場所をクリックしてチェックボックスをオフにし、ラベルをクリックしてチェックボックスをオフにします。

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>