Question

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

$("#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>

Fiddle version here

Answer 1

$("#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事件

Answer 2

它不起作用，因为您阻止了默认操作（preventDefault）停止事件传播就足够了

$("#cus_date").on('click', function(e) {
  
    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>

无论如何，您可以不使用span元素，而可以将复选框包装在label元素中，这样就可以避免完全使用javascript。

<label><input type="checkbox" /></label>

Codepen demo

Answer 3

在单击复选框时，不需要使用event.preventDefault()和event.stopPropagation。只需将复选框的id添加为选择器的一部分即可：

$('.cus_date, #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>

Answer 4

您可以这样做：

$('.cus_date, #cus_date').on('click', function() {
  $('#cus_date').prop('checked', !$('#cus_date').is(':checked'));
});

.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>

复选框不会在点击时使用

4 个答案: