Question

我有一个在HTML / JS / CSS中制作待办事项列表的作业

我可以根据需要进行任何美学更改，只要它有3个内容：一个允许用户输入到列表的按钮，在没有输入时删除按钮（白色空间不被视为输入）并且用户应该能够点击某些内容，以便用户可以删除该任务。

我在想一个点击超过5秒的复选框。到目前为止我得到了这个：

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="ToDo.css" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="ToDo.js"></script>
</head>


<body>
<h1>ToDo</h1>
<input type="checkbox"/>
<input type="text" placeholder="Please Enter a Task" id="input">
<input type="submit" value="Add" id="addButton" hidden="hidden">


</body>


</html>

这是我的JS档案：

$(document).ready(function() {

    $("#input")[0].oninput = function isEmpty() {

        if ($("#input").val() == "") {
            $("#addButton").fadeOut(250);
        } else {
            $("#addButton").fadeIn(250);
        }
    }


    $("#addButton").click(function() {
        $("#addButton").after($("<p></p>").text($("#input").val()));
        //$("p:first").prepend('<input type="checkbox" value="102" name="tags[]" id="tag102" class="checkbox" />');
        $("#input").val("");
        $("#addButton").hide();
    });




    $('input[type=checkbox]').change(function() {
      if( $(this).is(':checked')) {
              alert("This passed");
          }else {
              alert("This failed");
          }


    });

});

我也有CSS文件，但我认为此刻并不重要。我没有开始使用计时器，因为我无法弄清楚如何检查复选框是否已被选中。我尝试使用常规HTML复选框来检查它，并且工作正常。但由于某些原因，通过java脚本创建的那些无效。

请帮助，谢谢。

Answer 1

只需检测checked属性的存在，如下所示：

    $('input[type=checkbox]').change(function() {
      if( $(this).prop('checked')) {
              alert("This passed");
          }else {
              alert("This failed");
          }
    });
});

它应该工作：）

Answer 2

使用.prop()功能：

$('input[type=checkbox]').change(function() {
      if( $(this).prop('checked') == "checked") {
              alert("This passed");
          }else {
              alert("This failed");
          }


    });

Answer 3

使用.on()附加动态创建元素的事件处理函数

$(document).on('change','input[type=checkbox]', function() {
      if ($(this).is(':checked')) {
          alert("This passed");
      } else {
          alert("This failed");
      }
});

＆＃13;

$(document).ready(function() {
    $(document).on('change','input[type=checkbox]', function() {
          if ($(this).is(':checked')) {
              alert("This passed");
          } else {
              alert("This failed");
          }
    });
});

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="ToDo.css" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="ToDo.js"></script>
</head>


<body>
<h1>ToDo</h1>
<input type="checkbox"/>
<input type="text" placeholder="Please Enter a Task" id="input">
<input type="submit" value="Add" id="addButton" hidden="hidden">


</body>


</html>

＆＃13;

Answer 4

“选中了复选框，除非用户未在5秒内取消选中，否则不会发生任何事情”

实现这种功能的关键（正如我在上面的评论中提到的那样，将提供非标准的用户体验，所以除了用于学习目的之外我不建议这样做）是{{3} }，它允许您安排在指定延迟后调用的函数，以及setTimeout() function，它允许您取消先前计划的超时。您可以将它们与checkbox事件处理程序一起使用，如下所示：

var timeoutId;
$("input[type=checkbox]").on("click", function(e) {
  if (this.checked) {
    timeoutId = setTimeout(function() {
      alert("Time up! Do something here...");
    }, 5000); // delay in milliseconds
  } else {
    clearTimeout(timeoutId);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label><input type="checkbox"> Check me (and wait five seconds, or uncheck me)</label>

请注意，对于复选框，我建议使用click事件而不是change事件，因为在某些较旧的浏览器中，通过键盘“点击”复选框不会导致{{1} } event直到用户选中该字段，而change事件将通过基于鼠标或键盘的复选框触发。另外，假设在事件处理程序click中引用了复选框，您可以直接使用this，无需this.checked或$(this).prop("checked")。

此外，假设您将动态添加列表项，您将需要处理绑定到父页面的clearTimeout() function的复选框事件，该页面加载时$(this).is(":checked")，你的情况，因为你没有容器div或任何东西）。那就是：

document

将其与其他代码放在一起（并将延迟减少到三秒而不是五秒，以便于测试）：

// instead of:
$("input[type=checkbox]").on("click", function() { ... })
// use delegated version:
$(document).on("click", "input[type=checkbox]", function() { ... })

$(document).ready(function() {
    $("#input").on("input", function isEmpty() {
        if ($.trim(this.value) === "") {
            $("#addButton").fadeOut(250);
        } else {
            $("#addButton").fadeIn(250);
        }
    });

    $("#addButton").click(function() {
        $("#addButton").after($("<p></p>").text($("#input").val()));
        $("p:first").prepend('<input type="checkbox" />');
        $("#input").val("");
        $("#addButton").hide();
    });

    $(document).on('click', 'input[type=checkbox]', function() {
        if (this.checked) {
            // use an arrow function to solve the "this" problem
            var timeoutId = setTimeout(() => {
                $(this).parent().remove();
            }, 3000); // delay in milliseconds
            
            // store the timeout id against the element itself, because
            // the user could click multiple checkboxes in the list
            $(this).data("timeoutId", timeoutId);
        } else {
            clearTimeout($(this).data("timeoutId"));
        }
    });
});

检测是否选中了复选框

4 个答案: