jquery - 通过单击父级 div 来选中/取消选中复选框问题 - jQuery

Question

以下代码行通过单击其父 div 来选中/取消选中复选框。除了一个问题之外，该代码工作正常。问题是当我们单击复选框本身时，它不会被选中。如果已经通过单击复选框文本或其父 div 选中了它，则单击复选框本身不会取消选中它。如何解决这个问题？当我单击复选框及其标签文本和整个父 div 的宽度时，我希望代码能够正常工作。这是demo .

jQuery:

$(document).ready(function(){
    // Check/uncheck checkboxes clicking on its parent div
    $(".checkbox_option").click(function(){
        var chk = $(this).find("input[type='checkbox']");
        if(chk.prop("checked") == false)
        {
            chk.prop("checked", true);
        }
        else
        {
            chk.prop("checked", false);
        }
    });
});

CSS:

#checkbox_options {
    border:2px solid #b8b8b8;
    height:200px;
    margin:100px auto;
    overflow:scroll;
    width:500px;
}

.checkbox_option {
    padding:2px 5px;
}

.checkbox_option input[type="checkbox"] {
    margin-right:5px;
}

.checkbox_option:hover {
    background-color:#464646;
    color:#fff;
}

HTML:

<div id="checkbox_options">

    <div class="checkbox_option">
        <input type="checkbox" name="category[]" value="1" id="cat_1" />
        <label for="cat_1">Category 1</label>
    </div>

    <div class="checkbox_option">
        <input type="checkbox" name="category[]" value="2" id="cat_2" />
        <label for="cat_2">Category 2</label>
    </div>

    <div class="checkbox_option">
        <input type="checkbox" name="category[]" value="3" id="cat_3" />
        <label for="cat_3">Category 3</label>
    </div>

    <div class="checkbox_option">
        <input type="checkbox" name="category[]" value="4" id="cat_4" />
        <label for="cat_4">Category 4</label>
    </div>

    <div class="checkbox_option">
        <input type="checkbox" name="category[]" value="5" id="cat_5" />
        <label for="cat_5">Category 5</label>
    </div>

    <div class="checkbox_option">
        <input type="checkbox" name="category[]" value="6" id="cat_6" />
        <label for="cat_6">Category 6</label>
    </div>

    <div class="checkbox_option">
        <input type="checkbox" name="category[]" value="7" id="cat_7" />
        <label for="cat_7">Category 7</label>
    </div>

    <div class="checkbox_option">
        <input type="checkbox" name="category[]" value="8" id="cat_8" />
        <label for="cat_8">Category 8</label>
    </div>

    <div class="checkbox_option">
        <input type="checkbox" name="category[]" value="9" id="cat_9" />
        <label for="cat_9">Category 9</label>
    </div>

    <div class="checkbox_option">
        <input type="checkbox" name="category[]" value="10" id="cat_10" />
        <label for="cat_10">Category 10</label>
    </div>

</div>

Answer 1

您可以在此处查看更新的代码 jsfiddle.net/bharatsing/Luyj10vg/

$(document).ready(function(){
    $(".checkbox_option input[type='checkbox'],.checkbox_option label").on('click', 
    function(e){
      e.stopPropagation();
    });

    // Check/uncheck checkboxes clicking on its parent div
    $(".checkbox_option").click(function(){               
        var chk = $(this).find("input[type='checkbox']");
        if(chk.is(":checked") == false)
        {
            chk.prop("checked", true);
        }
        else
        {
            chk.prop("checked", false);
        }
    });
});