jquery - 親コンテナをクリックしてチェックボックスをオンにしますか?

Question

少し特定のチェックボックス領域をクリックする代わりに、親コンテナーをクリックしてチェックボックスをオンにしたい場合は、fiddleの例を次に示します。赤を追加する代わりに、 内のボックスにチェックを入れます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

次のように実行できます。

sに変更せずにオリジナル<label>:

$('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);