web-dev-qa-db-ja.com

チェックボックス変更イベントがトリガーされないのはなぜですか？

私には2つの機能があります。

最初の関数は、divクリックをチェック済み/チェックなしのトグルに変換します。 2番目の関数は、チェックボックスの変更を非表示/表示イベントに変換します。

問題は、最初の関数を使用してボックスをオン/オフにすると、2番目の関数が呼び出されないことです。おかげで、JavaScriptは初めてです。

<script type="text/javascript">
$(document).ready(function() {
    $(":checkbox").parent().click(function(evt) {
        if (evt.target.type !== 'checkbox') {
            var $checkbox = $(":checkbox", this);
            $checkbox.attr('checked', !$checkbox.attr('checked'));
            evt.stopPropagation();
            return false;
        }
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() {
    $(":checkbox").change(function() {
        if($(this).attr("checked")) {
            $('.'+this.id).show();
        }
        else {
            $('.'+this.id).hide();
        }
    });
});
</script>
javascriptjqueryhtmlcheckboxclick
21
sxv

プログラムでチェックボックスの値を変更しても、changeイベントは発生しません。確実に起動するためにできることは次のとおりです。

 $(":checkbox").parent().click(function(evt) {
    if (evt.target.type !== 'checkbox') {
        var $checkbox = $(":checkbox", this);
        $checkbox.attr('checked', !$checkbox.attr('checked'));
        $checkbox.change();
    }
});
33
Matthew Manela

最初のスニペットを気にしないでください。 LABEL要素を使用するだけです。

<label><input type="checkbox">Some option</label>

これで、ユーザーがラベル（チェックボックスの横のテキスト）をクリックすると、チェックボックスがアクティブになります。

2番目のスニペットは最適化できます。

$('input:checkbox').change(function() {
    $('#' + this.id).toggle(this.checked);
});
5
Šime Vidas

エレメントIDを使用しているので、代わりに'.'を使用します。これはクラスセレクター用です。代わりに'#'を使用してください。このような：

$(document).ready(function() {
    $(":checkbox").bind('change', function() {
        if($(this).attr("checked")) {
            $('#'+this.id).show();
        }
        else {
            $('#'+this.id).hide();
        }
    });
});
1
Victor