2

次のマークアップがあるという問題があります。

<input type="checkbox" id="foo" />
<label for="foo">
    <a href="http://www.google.com">
        Checkbox text
    </a>
</label>

ユーザーが JavaScript を有効にしていない場合に備えて、ラベルにはネストされたアンカーがあり、その場合、ユーザーはラベルをクリックするとリンクをたどります。

リンクのクリックを防ぎ、チェックボックスの状態が変更されたときにアラートを表示するために、次のjavascript/jQueryがあります。

$(function(){
    $("label a").click(function(e){
       e.preventDefault(); 
    });
    $("#foo").change(function(){
       alert("checkbox changed"); 
    });
});

-- 例を参照 --

ただし、ラベルをクリックしても、チェックボックスのチェック状態は変更されません。

コードをハックして、コードを追加してチェック済みステータスを設定することで、ネイティブ ブラウザー機能をエミュレートできることは承知していますが、エミュレートするよりもネイティブ機能を使用することをお勧めします。

リンクをたどらず、JavaScriptを使用してチェック状態を設定せずに、チェックボックスの状態を変更するにはどうすればよいですか?

4

1 に答える 1

1

ここで少し混乱していますand without setting the checked state using javascript?...しかし、私はあなたが話していると思いますtrigger()...

$("label a").click(function(e){
    var $foo = $("#foo");
    $foo.attr("checked", !$foo.attr("checked"));
    $foo.trigger('change');
   return false;
});

フィドル

于 2013-03-21T10:00:54.707 に答える