jQuery操作复选框的简单使用

　　开发中为了实现一个小功能，就是复选框的相互影响事件，如下图：

　　就是通过复选框设置权限，权限是分等级的，这是一个web管理系统的应用，一个管理员具有三个权限赋予，权限也是有等级的，其中删除和编辑权限相当，就是说当拥有编辑和删除权限时，一定拥有查看权限，反过来不一定。但是没有查看权限时，一定没有编辑和删除权限，大体就是这么个逻辑

　　在前端为了用户体验，用jQuery绑定点击事件来完成，开始用的方法是.attr()，用法是$("[name = inputname]:checkbox").attr("checked", true);

这样就能实现复选框的选中效果，网上大部分都是这种方法，是可以的，但是注意name不能设置成比如name="name1[0]"这种格式，否则上述方法会运行错误，因为[ ]这种符号name属性是不支持的，但是后端用起来是数组格式，比较方便，所以如果表单name带有中括号，这种方法是不能用的。

　　另外也测试了其他方法，有时候开发者模式下发现复选框属性确实变成了checked，但是效果上却没有选中，并且attr返回值是checked这样的话对复选框操作的难度增大了，所以放弃了这个方法，我个人比较习惯使用id选择器操作，下面方法可以完美的适用于这个问题的操作

　　jQuery中还有一个类似attr的方法，就是prop这个方法非常适合于复选框之类的操作，有两种用法如下：

　　　　1、返回属性的值：$(selector).prop(property)，一般返回true和false

　　　　2、设置属性的值：$(selector).prop(property,value)，比如设置选中或者是否可用

　　另外第二个参数还可以用函数设置属性和值，这里就不具体说了

有了这个操作，我们应该什么时候用attr和prop方法呢，我的体会是一般设置表单的样式之外的单一值属性，比如required，checked，disabled，readonly，这类属性可以写成checked也可以写成checked="checked"，就使用prop方法，一般返回值是true或者false的布尔值，另外就用attr设置就行了，比如src，style等都是很好用的

网上有一种解释也不错，记录一下：

　　1.添加属性名称该属性就会生效应该使用prop();

　　2.是有true,false两个属性使用prop();
　　3.其他则使用attr();

比如我这个小特效，可以使用onchange或者onclick绑定事件，但是其实操作需要好几个事件，所以要写好几个函数，直接用jQuery的id绑定就不错，应用的代码如下：

        地区管理：<br />
        <div style="margin-left:238px;">
            查看<input type="checkbox" class="am-input-sm" name="area[0]" id="area0" value="1" />
            &nbsp;
              编辑<input type="checkbox" class="am-input-sm" name="area[1]" id="area1" value="1" />
              &nbsp;
              删除<input type="checkbox" class="am-input-sm" name="area[2]" id="area2" value="1" />
        </div>
        <script type="text/javascript">
        $(document).ready(function(){
            $('#area2').click(function(){
                if($('#area0').prop('checked')==false&&$('#area2').prop('checked')==true){
                    $('#area0').prop('checked',true);
                }
            });
            $('#area1').click(function(){
                if($('#area0').prop('checked')==false&&$('#area1').prop('checked')==true){
                    $('#area0').prop('checked',true);
                }
            });
            $('#area0').click(function(){
                if($('#area0').prop('checked')==false&&$('#area1').prop('checked')==true){
                    $('#area1').prop('checked',false);
                }
                if($('#area0').prop('checked')==false&&$('#area2').prop('checked')==true){
                    $('#area2').prop('checked',false);
                }
            });
        });
        </script>

 

这是一部分代码，但是完全实现了这个功能，逻辑也比较简单，需要注意的一点是比如点击删除后即id="area2"的复选框后，复选框被选中，这一瞬间值是改变的，从没选中到选中，$("#area2").prop("checked")的值从false变成了true，注意这里其他的就没问题了