复选框选中判断的兼容性处理

由于JQuery版本的不同,判断复选框的选中判断条件也不同：如下表

elem.checked	true （Boolean）将以复选框状态更改
$( elem ).prop( "checked" )	true （Boolean）将以复选框状态更改
elem.getAttribute( "checked" )	"checked"（String）复选框的初始状态; 不改变
$( elem ).attr( "checked" ) （1.6）	"checked"（String）复选框的初始状态; 不改变
$( elem ).attr( "checked" ) （1.6.1+）	"checked" （String）将以复选框状态更改
$( elem ).attr( "checked" ) （预1.6）	true （Boolean）更改为复选框状态

用$("elem").attr("checked")不同的jquery版本得到的结果可能不同，可能为true或checked，现在不要使用这种方法。

所以判断复选框选中的兼容性写法有一下3中:

if ( elem.checked ) 纯javascript方法
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )

Demo:

<p style="font-size:20px;">
<a href="javascript:;" id="quanAll">全选</a>　
<a href="javascript:;" id="fanAll">反选</a>　
<a href="javascript:;" id="quAll">取消</a>
</p>
    <div class="s3">
        <ul>
            <li class="s31"><input type="checkbox" name="frName[]" value="23" id="fr_23"> <label for="fr_23">苹果</label></li>
            <li class="s31"><input type="checkbox" name="frName[]" value="24" id="fr_24"> <label for="fr_24">橘子</label></li>
            <li class="s31"><input type="checkbox" name="frName[]" value="45" id="fr_45"> 菠萝</li>
            <li class="s31"><input type="checkbox" name="frName[]" value="67" id="fr_67"> 火龙果</li>
            <li class="s31"><input type="checkbox" name="frName[]" value="123" id="fr_123"> 桃子</li>
            <li class="s31"><input type="checkbox" name="frName[]" value="788" id="fr_788"> 香蕉</li>
            <li class="s31"><input type="checkbox" name="frName[]" value="333" id="fr_333"> 梨子</li>
            <li class="s31"><input type="checkbox" name="frName[]" value="25" id="fr_25"> 西瓜</li>
            <li class="s31"><input type="checkbox" name="frName[]" value="90" id="fr_90"> 猕猴桃</li>
            <li class="s31"><input type="checkbox" name="frName[]" value="76" id="fr_76"> 葡萄</li>
            <li class="s31"><input type="checkbox" name="frName[]" value="54" id="fr_54"> 樱桃</li>
            <li class="s31"><input type="checkbox" name="frName[]" value="44" id="fr_44"> 草莓</li>
        </ul>
    </div>

    //全选
    $("#quanAll").click(function(){
        $(".s3").find("input").prop("checked",true);
       
    });
    //取消
    $("#quAll").click(function(){
        $(".s3").find("input").prop("checked",false);
      
    });


    //反选
    $("#fanAll").click(function(){
        $("[id^=fr_]").each(function(){
            $(this).click();
        });
       
    });