时间戳

首页 > 解决方案 > 复选框不会在点击时检查

javascript - 复选框不会在点击时检查

问题描述

我试图在单击容器的跨度时进行复选框检查，但问题是当我单击跨度时它会检查/取消选中，但是当我单击复选框本身时它不起作用，知道为什么吗？

$("#cus_date").on('click', function(e) {
    e.preventDefault()
    e.stopPropagation()
});
$('.cus_date').on('click',function(){
    if($("#cus_date").is(":checked")) {
        $("#cus_date").prop("checked", false)
    } else {
        $("#cus_date").prop("checked", true)
    }
});
.cus_date {
  background-color: red;
  display: block;
  width: 30px;
  height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<span class="input-group-addon cus_date" for="filtre_periode_custom"><input type="checkbox" id="cus_date" name="filtre_periode_custom" value="1"></span>

小提琴版本在这里

标签： javascriptjqueryhtmlcss

解决方案

$("#cus_date").on('click', function(e) {
    //e.preventDefault() 
     e.stopPropagation()
});
$('.cus_date').on('click',function(){
    if($("#cus_date").is(":checked")) {
        $("#cus_date").prop("checked", false)
    } else {
        $("#cus_date").prop("checked", true)
    }
});
.cus_date {
  background-color: red;
  display: block;
  width: 30px;
  height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<span class="input-group-addon cus_date" for="filtre_periode_custom"><input type="checkbox" id="cus_date" name="filtre_periode_custom" value="1"></span>

preventDefault将停止默认操作并stopPropagation停止触发父onClick事件

推荐阅读