输入类型复选框中出现意外的javascript行为

Question

我的asp.net核心2.0/mvc6项目中有一个元素，它是一个类型输入复选框。我只是在测试如何在切换这个复选框的同时更改另一个隐藏元素的值，但无法使其工作，所以我使用了显示的简单jquery来查看点击结果。

Html

<div class="col-xs-7 col-sm-8">
<label class="css-input switch switch-sm switch-success">
<input type="checkbox" id="validation-terms" name="validation-terms"><span></span> I agree to all terms
</label>
</div>
<div class="col-xs-5 col-sm-4">
<div class="font-s13 text-right push-5-t">
<a href="#" data-toggle="modal" data-target="#modal-terms">View Terms</a>
</div>
</div>
@Html.HiddenFor(m =>m.Terms, new { id="register-terms" })

Javascript

$terms是元素的变量

var $terms = $("#validation-terms");
//toggle the slider when terms modal agree button clicked
$terms.on('click', function () {
if ($terms.is(':checked')) {
//$terms.prop('checked', false);
//$('#register-terms').val(false);
alert("changing to blank");
} else {
//$terms.prop('checked', true);
//$('#register-terms').val(true); 
alert("changing to green");
}
});

页面加载时滑块未选中(空白、灰显，无论您想怎么称呼它)，除非添加选中的属性，否则这是正常行为。单击复选框(它是一个滑块)后，您会期望javascript检测到它未选中，并显示更改为绿色的消息，但行为恰恰相反！第一次单击它时，您会看到变为空白的消息，滑块变为绿色，当您再次单击它时(据说)，现在它处于选中状态，您会收到变为绿色的消息，然后它又变为空白。

我在这里错过了什么？

Answer 1

我不确定你的$terms变量是否被正确使用，因为你没有包括初始化$terms的代码，但在点击函数中使用对"this"的引用将获得被点击复选框的实际值。请参阅下面的片段，看看它是否有助于理解这个问题。根据你提供的代码，它似乎为我显示了正确的警报：

$(function(){
//toggle the slider when terms modal agree button clicked
$terms = $("#validation-terms");
$terms.change(function () {
//If the current click if checking the box:
if ($(this).is(':checked')) {
//$terms.prop('checked', false);
//$('#register-terms').val(false);
alert("Checking the checkbox");
} else { //If the current click is un-checking the box:
//$terms.prop('checked', true);
//$('#register-terms').val(true); 
alert("Unchecking the checkbox");
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-7 col-sm-8">
<label class="css-input switch switch-sm switch-success">
<input type="checkbox" id="validation-terms" name="validation-terms"><span></span> I agree to all terms
</label>
</div>
<div class="col-xs-5 col-sm-4">
<div class="font-s13 text-right push-5-t">
<a href="#" data-toggle="modal" data-target="#modal-terms">View Terms</a>
</div>
</div>
<input type="hidden" id="register-terms" >

以下是更改或单击事件与复选框的基本工作方式：

$('#checkbox1').change(function() {
if($(this).is(":checked")) {
//'checked' event code
}
else {
//'unchecked' event code
}
});