jq 获取 元素的 padding-top值_jq简单的全选、反选和全不选效果

jquery是很实用和方便的前端效果库，可以让我减少很多的操作和节省很多的时间。今天，我们来说一下jq的全选、全不选和反选效果，本篇讲的是最简单简洁的jq全选、全不选和反选的例子。如果还有什么其他的功能要求可自己根据所学到的基础来扩展一下。

首先，我们来创建一下所需要的html页面，导入jq文件，这里我们使用的是jq压缩版，把复选框例子填充上。

创建html页面的同时，把全选、全不选和反选按钮分别给它们id命名：all、not、reverse，方便jq之后获取CheckBox来实现全选不选等效果。

接下来，就是我们的jq登场了，jq根据按钮的ID名来获取点击事件，来实现我们所需要的效果。

其中，prop（），我们来说一下它的含义。

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。

这就是最简单的全选、全不选和反选的实例，希望对你们有所帮助。下面附上代码，供你们参考:

html代码：

<div id="box-function">
    <input id="all" type="button" value="全选" />
    <input id="not" type="button" value="全不选" />
    <input id="reverse" type="button" value="反选" />
 </div>
 <div id="choose">
    <input type="checkbox" />
     <input type="checkbox" />
     <input type="checkbox" />
     <input type="checkbox" />
     <input type="checkbox" />
     <input type="checkbox" />
     <input type="checkbox" />
     <input type="checkbox" />
     <input type="checkbox" />
     <input type="checkbox" />
     <input type="checkbox" />
     <input type="checkbox" />
</div>

jq代码：

<script type="text/javascript">
         $(function(){
            var $choose = $("#choose input");
            //全选
            $("#all").click(function(){
                $choose.each(function(){
                     $(this).prop("checked",true);
                 });
             });
             //全不选
             $("#not").click(function(){
                 $choose.prop("checked",false);
             });
            //反选
            $("#reverse").click(function(){
                 $choose.each(function(){
                    $(this).prop("checked",!$(this).prop("checked"));
                 });
             });
         });
     </script>

原文：

jq简单的全选、反选和全不选效果-三人行慕课​www.3mooc.com