现在简单介绍一下示例应用程序。我将在本系列所有文章中使用这个示例应用程序，因为它使用了大量不同的 jQuery 示例，并且几乎所有人都熟悉这个应用程序 — 一个处理 Web 邮件的富 Internet 应用程序。这个示例应用程序是一个简单的邮件客户机，它利用 jQuery 给用户这样的感觉：该电子邮件客户机非常类似于桌面应用程序。在最后一篇文章结束时，您将明白这个简单的应用程序是如何为用户制造这种感觉的，并且明白使用 jQuery 实现这个功能是多么简单。
本文的重点是 “Select All”/“Deselect All” 复选框，它们出现在 Web 邮件表（下面突出显示）的左侧列的顶部。当选中该复选框时，它将选择该列的每个复选框；取消选择该复选框时，它将取消选择该列的所有复选框。
图 2. “Select All” 复选框
清单 13. 综合学到的知识
<!-- The first step is creating the Select All checkbox itself. we give it a unique ID on the page --> <input type=checkbox id=selectall> <!-- The next step is giving each of the rows their own checkbox. we put each row's checkbox into the 'selectable' class, since there can be many rows, and we want each of the rows' checkboxes to have the same behavior. --> <input type=checkbox class=selectable> <!-- The final step is bringing it all together with some jQuery code. --> // remember that all jQuery setup code must be in this document.ready() function, // or contained within its own function in order to function correctly. $(document).ready(function(){ // We use the jQuery selection syntax to find the selectall checkbox on the page // (note the '#' which signifies ID), and we tell jQuery to call the selectAll() // function every time someone clicks on the checkbox (we'll get to Events in a // future article). $("#selectall").click(selectAll); }); // This function will get called every time someone clicks on the selectall checkbox function selectAll() { // this line determines if the selectall checkbox is checked or not. The attr() // function, discussed in a future article, simply returns an attribute on the // given object. In this case, it returns a boolean if true, or an undefined if // it's not checked. var checked = $("#selectall").attr("checked"); // Now we use the jQuery selection syntax to find all the checkboxes on the page // with the selectable class added to them (each row's checkbox). We get an array // of results back from this selection, and we can iterate through them using the // each() function, letting us work with each result one at a time. Inside the // each() function, we can use the $(this) variable to reference each individual // result. Thus, inside each loop, it finds the value of each checkbox and matches // it to the selectall checkbox. $(".selectable").each(function(){ var subChecked = $(this).attr("checked"); if (subChecked != checked) $(this).click(); }); }
相关文章
精彩导读
热门资讯
关注我们
