jQuery 复选框 - 解释答案

【问题标题】：jQuery checkboxes - explanationjQuery 复选框 - 解释
【发布时间】：2016-06-20 21:10:27
【问题描述】：

我做了一个没有的小表格。复选框..当我点击“全选”-复选框时，所有复选框都会自动选中。这是我的代码，但我只从互联网上获取了以下代码。虽然它可以工作，但由于我是 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>

【问题讨论】：

你有什么问题？
请解释一下脚本在上述程序中是如何工作的
$("input:checkbox") 选择所有checkbox 类型的输入元素，并简单地将属性“checked”添加到所有这些元素。 $(this).prop("checked") 是一种检查复选框是否被选中的方法。所以换句话说，代码将检查复选框是否被选中（真或假），它将使用该结果来取消选中或选中复选框。并且该例程将为复选框类型的每个输入元素执行。
jQuery 有一个很棒的参考资料，您可以使用它来查找您不确定的任何选择器、属性和方法。 api.jquery.com
好的@Jorrex ..我再次尝试..tx ..

标签： jquery html

【解决方案1】：

这很简单，首先在此代码中简单，当您选中第一个（全选）复选框，然后发生更改事件，下一行 $("input:checkbox)" 选择器选中所有复选框。并且 prop 函数检查检查的属性 $(this).prop("checked");在复选框中添加选中的属性并选中所有复选框。

【讨论】：

【解决方案2】：

这是带有 cmets 的脚本：

// 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");
    });

});

你可以在here看到它。

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

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

希望这很有用:)

【讨论】：