我在wordpress的snippets插件中运行了以下代码。
Jquery的：
<script>
jQuery(document).ready(function(event)
{
jQuery(".checkbox").click(function()
{
if(jQuery(this).is(":checked"))
alert('checked');
else
alert('unchecked ');
});
});
</script>
HTML：
<div class="checkbox">
<h2>
<label>
<input type="checkbox" class="checkbox" value="">
Ignore Registration
</label>
</h2>
</div>
选中该复选框后，我收到两个警报（已选中，然后取消选中）。
如果取消选中此复选框，我也会收到两个警报（未选中且未选中）。
我不确定为什么会发生这种情况，但是当我更改输入标记以使用id而不是类时，解决方案完美无缺。
jQuery("#checkbox").click ..........
<input type="checkbox" id="checkbox"..........
我只是想知道发生了什么，或者点击事件使用类和ID的区别
答案 0 :(得分：1)
问题： - 由于div和复选框都共享相同的类，这就是为什么事件触发两次（单击复选框上的复选框触发事件以及因同一类而在div上）
所以改变课程你会很高兴
工作代码段： -
jQuery( document ).ready(function(event) {
jQuery(".checkbox").click(function() {
if(jQuery(this).is(":checked"))
alert('checked');
else
alert('unchecked ');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2><label><input type="checkbox" class="checkbox" value="">Ignore
Registration</label></h2>
</div>
答案 1 :(得分：0)
你的div类和checkbox类是一样的。更改div类名称。
<div class="checkbox1">
<h2><label><input type="checkbox" class="checkbox" value="">Ignore Registration</label></h2>
</div>
否则在点击选择器中更改
<script>
jQuery( document ).ready(function(event) {
jQuery(".checkbox input[type=checkbox]").click(function() {
if(jQuery(this).is(":checked"))
alert('checked');
else
alert('unchecked ');
});
});
</script>
答案 2 :(得分：0)
这是因为你有两个DOM元素：checkbox。因此，单击时您的div将运行该函数，并且您的输入将在单击时运行该函数（我假设您单击了导致函数运行两次的输入）。您需要更好地分离HTML，建议：
<div class="checkbox-container">
<label>Ignore Registration</label>
<input type="checkbox" class="checkbox" value="">
</div
答案 3 :(得分：0)
这是因为div和input都有checkbox类。因此，在定位此类时，它实际上是针对这两个元素运行的。
div总是返回未选中状态，复选框将分别返回选中或取消选中。
如果您想坚持使用现有的类名，请更改div的类，或将您的JS更改为目标$(input.checkbox)。
答案 4 :(得分：0)
试试此代码
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#checkbox").click(function () {
if ($(this).is(":checked")) {
if(jQuery(this).is(":checked"))
alert('checked');
} else {
alert('unchecked ');
}
});
});
</script>
<form>
<div class="checkbox">
<h2><label><input type="checkbox" class="checkbox" id ="checkbox" value="">Ignore Registration</label></h2>
</div>
</form>
答案 5 :(得分：0)
我是因为你有两个带有checkbox类的元素。更改div周围checkbox内的课程，并且该工作正常。
$(document).ready(function(event) {
$(".checkbox").click(function() {
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('unchecked ');
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkboxContainer">
<h2><label for="checkboxId">Ignore Registration</label>
<input id="checkboxId" type="checkbox" class="checkbox" value=""></h2>
</div>
答案 6 :(得分：0)
请您更改类名，在下面的代码中有2个类使用同名1. div类：复选框2是输入类：复选框，请更改div类名，然后只获得1个警报，你可以在jQuery点击功能中添加输入
jQuery("input.checkbox").click(function(e) {
<div class="checkbox">
<h2><label><input type="checkbox" class="checkbox" value="">Ignore Registration</label></h2>
解决方案1：
<script>
jQuery( document ).ready(function(event) {
jQuery("input.checkbox").click(function() {
if(jQuery(this).is(":checked"))
alert('checked');
else
alert('unchecked ');
});
});
</script>
<div class="checkbox">
<h2><label><input type="checkbox" class="checkbox" value="">Ignore
Registration</label></h2>
</div>
解决方案2：
<script>
jQuery( document ).ready(function(event) {
jQuery(".checkbox").click(function() {
if(jQuery(this).is(":checked"))
alert('checked');
else
alert('unchecked ');
});
});
</script>
<div class="checkbox1">
<h2><label><input type="checkbox" class="checkbox" value="">Ignore Registration</label></h2>
</div>