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/

Answer 2

嗨，我认为这是因为当你点击复选框时它会触发两次。如果你想要它工作，你需要停止传播复选框点击。

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

here is working demo

但处理此示例的更好方法是使用css。您可以设置标签标签的样式以包含整行。

Answer 3

这是一个使用css的工作示例：

jsFiddle

    <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>

的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;
    width:13px;
    display:block;
    float:left;
}

.checkbox_option:hover {
    background-color:#464646;
    color:#fff;
}
.checkbox_option label{
  width:calc(100% - 22px);
  display: inline-block;
}

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

3 个答案: