ラベルをクリックして+チェックボックスをクリックする方法は？

Question

チェックボックスをクリックすると、私のフォームにいくつかの検証が実行されます。

$('#ilikeicecream').click(function(){ 
    runValidation(); 
}); 

チェックボックスにもラベル要素があるため、チェックする必要があります。私の最初の本能は、次の操作を実行することでした。

$('#ilikeicecream-label').click(function(){ 
    runValidation(); 
}); 

問題が意図したとおりに検証が動作しませんので、チェックボックスは、この時点で確認されていないことです。どうすればこの問題を回避できますか？

Answer 1

使用change()：選択ボックス、チェックボックス、およびラジオボタンの場合

$('#ilikeicecream').change(function(){ 
    runValidation(); 
}); 

、イベントは、ユーザーがマウスで選択を行ったときに、すぐに を解雇したが、 のための他の要素であり、要素がフォーカスを失うまでイベントは延期されます。

---

私は次のコードでjsFiddleでテストしてみました。 jsfiddleが現在ダウンしているので、私はリンクを提供することができません。

<label for="ilikeicecream">sdsd</label><input id="ilikeicecream" type="checkbox" /> 

$('#ilikeicecream').change(function(){ 
    alert("test"); 
}); 

---

これは、おそらくあなたがinputに合わせてlabelでfor属性を指定していない動作しない場合。

Answer 2

$('#ilikeicecream-label').click(function(){ 
    // Swap the checked property value of the check box here 
    runValidation(); 
}) 

Answer 3

だけ<label>タグが付けられたチェックボックスを包みます。あなたがrunValidation()機能を呼び出すことができるchangeイベントを発射するようにラベルチェックボックスをクリックすると自動的に変更されます。これはあなたのために働く必要があります

Answer 4

<label><input type="checkbox" value="1" id="blahblah" name="myname" /></label> 

とチェックボックスの.changeハンドラを（あなたはそのラベル用に別のものを必要としない）に保つ... ...

$('#ilikeicecream').change(function(){ 
    runValidation(); 
}); 

$('#ilikeicecream-label').click(function(){ 
    if($('#ilikeicecream').attr('checked')){ 
      $('#ilikeicecream').attr('checked', false); 
    } 
    else{ 
      $('#ilikeicecream').attr('checked', true); 
    } 
    runValidation(); 
});