javascript - 启用 "Terms and conditions"上的复选框滚动不起作用

Question

我的复选框一开始就被选中，即使应该设置为false。每当我滚动时，复选框都会被选中，不会经过 if 语句。

https://jsfiddle.net/7mujuvn3/1/

$(document).ready(function () {
    //checkbox
    $('#box').attr('checked', 'false');
        $("#terms").scroll(function () {
            //the room for scrolling is 30px in the textarea
            if ($("#terms").scrollTop() === 30) {
                $('#box').attr('checked', 'true');
            } else {
                $('#box').attr('checked', 'false');
            }
        });
    });

Answer 1

您应该删除 true 和 false 两边的引号，在所有情况下使用 prop，并在 scrollTop 之后使用括号code> 将其作为方法运行。另外，您可能需要使用 > 来检查 scrollTop，因为如果两者都大于或小于 30，它将取消选中该框再次。

https://jsfiddle.net/7mujuvn3/4/

$(document).ready(function () {
    //checkbox
    $('#box').prop('checked', false);

    $("#terms").scroll(function () {
        //the room for scrolling is 30px in the textarea
        if ($("#terms").scrollTop() > 30) {
            $('#box').prop('checked', true);
        } else {
            $('#box').prop('checked', false);
        }
    });
});

#terms {
    width: 300px;
    height: 180px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="" id="terms" cols="30" rows="10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid
    at dignissimos doloribus explicabo suscipit vero! Aliquam beatae, cumque dignissimos eum expedita, in maxime neque optio quae quidem quos ut?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto aut blanditiis deserunt doloribus ea, eaque impedit laborum minima non officiis placeat quasi quidem repudiandae. At dolores explicabo inventore necessitatibus</textarea>
<input id="box" type="checkbox" checked="">