0

クラス「チェックボックス」を持つさまざまなブロックをターゲットにしようとしていますが、それらにはすべて、ラベルとチェックボックスタイプの入力が含まれています。.checkbox領域内の任意の場所（入力を除く）をクリックすると、「チェックされた」値が切り替えられます。入力をクリックすると、値は同じままになります。なぜそれがそのように動作するのか（入力をクリックしても値が切り替わらないのはなぜですか）、誰かが私に説明できますか？

HTML

<div class="checkbox">
    <label for="a">a</label>
    <input type="checkbox" name="a" checked>
</div>
<div class="checkbox">
    <label for="b">b</label>
    <input type="checkbox" name="b">
</div>

JQuery

function toggleProp(el) {
    $(el).prop("checked", !el.prop("checked"));
}

$(".checkbox").click(function () {
    toggleProp($(this).find("input"));
});

実例

編集：

  • それがすべきこと：

    .checkbox領域内の任意の場所をクリックすると、入力のcheckedプロパティの値がtrueからfalseに、またはその逆に切り替えられているはずです。

  • 内容：

    入力を除く.checkarea領域内の任意の場所をクリックすると、値が切り替わります。入力をクリックすると、値は同じままになり、不要になります

4

1 に答える 1

0

それを見つけた。

この部分も追加する必要がありました：

$(".checkbox input").click(function(e) {
    e.stopPropagation();
});

このように、入力をクリックしても、親のクリックイベントはトリガーされません。

于 2013-03-11T06:37:08.267 に答える