j查询复选框 - 说明 - jQuery checkboxes - explanation 小贝子编程网

我做了一个小表格，上面没有复选框...当我单击"全部选中"复选框时，所有复选框都会自动选中。这是我的代码，但我只从互联网上获取了以下代码。虽然它正在工作，但由于我是 jQuery 的新手，我不明白这段代码的作用。有人可以解释一下吗？

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $("#checkAll").change(function () {
          $("input:checkbox").prop('checked', $(this).prop("checked"));
          alert("Yoy have checked all");
        });
      });
    </script>
</head>
<body>
<form>
    <p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
    <fieldset>
        <legend>All Checkboxes</legend>
        <p><label><input type="checkbox" /> Option 1</label></p>
        <p><label><input type="checkbox" /> Option 2</label></p>
        <p><label><input type="checkbox" /> Option 3</label></p>
        <p><label><input type="checkbox" /> Option 4</label></p>
    </fieldset>
</form>
</body>
</html>

这非常简单，首先在此代码中很简单，当您选中第一个（全选）复选框时，然后更改事件是发生的，下一行$（"输入：复选框）"选择器选中全部复选框。和道具功能检查属性检查$（this）.prop（"checked"）;添加选中的属性复选框，所有复选框都处于选中状态。

以下是带有注释的脚本：

// When document is ready, run function
$(document).ready(function(){
    // When 'change' event is triggered on element with id 'checkAll'
    // run function 
    $("#checkAll").change(function () {
        // Set property 'checked' of all inputs with type 'checkbox'
        // to state that #checkAll input has
        $("input:checkbox").prop('checked', $(this).prop("checked"));
        // Alert 'Yoy have checked all'
        alert("Yoy have checked all");
    });
});

你可以在这里看到它的实际效果。

如果你对jQuery或JavaScript不是很熟悉，请查看YouTube上的一些初学者教程，或者只是谷歌它。有很多视频教程解释了基本的HTML和jQuery内容，这些内容应该非常有用。

请注意，stackoverflow不是其他开发人员解释某些代码片段的作用的地方。

希望这对:)有用

j查询复选框 - 说明

相关内容

最新更新

热门标签：