jquery - 通过单击父容器来选中复选框？

Question

无需单击特定的小复选框区域，id 喜欢通过单击父容器来检查复选框，这是一个示例fiddle。而不是添加红色，id 喜欢选中li.

我试图寻找这个答案，但找不到我要找的东西，这应该很简单，对某些人来说可能很有趣。

HTML：

<li class="option table selected">
<div class="cell" id="left">
    <div class="fontawesome-menu"></div>
</div>
<div class="cell" id="center">
    <div class="option-text">I like green eggs</div>
</div>
<div class="cell" id="right">
    <div class="option-checkbox">
        <div class="check"></div>
        <input name="personalization_result[memory_0]" type="hidden" value="0">
        <input id="personalization_result_memory_0" name="personalization_result[memory_0]" type="checkbox" value="1">
    </div>
</div>
</li>

jQuery：

$('li').click(function () {
    $(this).addClass('seuss');
});

请检查小提琴以更好地理解我的问题。

Answer 1

你可以这样做：

原版不改<label>s：

$('li').click(function(){
    var el = $(this).toggleClass('seuss');
    el.find('input[type=checkbox]').prop('checked', el.hasClass('seuess'));
});

使用<label>s更新：

HTML：

<li class="option table selected">
    <label for="personalization_result_memory_0">
        <div class="cell" id="left">
            <div class="fontawesome-menu"></div>
        </div>
        <div class="cell" id="center">
            <div class="option-text">I like green eggs</div>
        </div>
        <div class="cell" id="right">
            <div class="option-checkbox">
                <div class="check"></div>
                <input name="personalization_result[memory_0]" type="hidden" value="0">
                <input id="personalization_result_memory_0" name="personalization_result[memory_0]" type="checkbox" value="1">
            </div>
        </div>
    </label>
</li>

Javascript：

$('input[type=checkbox]').change(function(){
    var el = $(this).closest('li').toggleClass('seuss');
});

请注意，即使您将输入包装在 中<label>，您也应该使用该for属性。

Answer 2

你可以使用<label>标签

http://www.w3schools.com/tags/tag_label.asp

Answer 3

http://jsfiddle.net/CVjCr/1/

添加$(this).find('input').prop('checked', true);

Answer 4

很容易使用“for”和“id”来实现这个功能。这是示例。

<div>
<input type="checkbox" id="contractConsent" />
<label for="contractConsent">By checking this box, I agree to the terms and conditions. </label>
</div>