form の label に対して jQuery でon.('click', function(){});イベントを設定した時、クリックすると２回イベントが発動し、ダブルクリックした時のような挙動になります。
その時の対処法を記載しておきます。
HTML記載例
<form action="">
<label for="male">
<input id="male" type="radio" name="male" value="男性" checked>男性
</label>
<label for="famale">
<input id="famale" type="radio" name="famale" value="女性">女性
</label>
</form>
上記のようなHTMLがあった時、labelにクリックイベントを設定すると、inputのクリックイベントも発火するため、ダブルクリックしたような挙動となります。
labelにクリックイベントを設定するのではなく、inputにクリックイベントを設定することで回避できます。
JS記載例
// label ではなく input にクリックイベントを設定
$('input').on( 'click', function(){
console.log('test');
});
// または label ではなく input にチェンジイベントを設定
$('input').on( 'change', function(){
console.log('test');
})
最後に
label を display: block; している時などは label にイベントを設定したくなりがちなのですが、label と input は連携しているので input にイベントを設定するようにしましょう。
