NOTE / JS

使用Checkbox 綁定 Label for

2017.11.09 / JS /

CSS JS

因使用checkbox 以及綁定label 在此紀錄 如果使用click事件點擊到label 會產生 trigger事件意思就是會點選兩次checkbox 而導致發生錯誤 建議再點選時候使用e.target.tagName.toUpperCase() 如果點選到的是 label就return讓只點選一次

$(".slideThree").on('click', function (e) {
  if (e.target.tagName.toUpperCase() === "LABEL") {
    console.log(e.target.tagName.toUpperCase());
    return;
  }
})

Html語法

<div class="slideThree">
  <input type="checkbox" value="None" id="slideThree" name="check" checked >
  <label for="slideThree"></label>
</div>

REFERENCE / 4

• click-event-called-twice-in-jquery ↗
• checkbox style ↗
• switch(開關) style ↗
• checkbox design style ↗