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

朱雀 2022-06-15 12:14 296阅读 0赞

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

<table style="border-collapse:collapse; border-spacing:0px; margin:1em 2em; color:rgb(51,51,51); font-family:'Helvetica Neue',HelveticaNeue,Helvetica,Arial,sans-serif; font-size:15px; orphans:2; widows:2"> 
 <tbody style=""> 
  <tr style="border-bottom:1px solid rgb(102,102,102)"> 
   <th style="font-family:klavika-web,&quot;Helvetica Neue&quot;,Helvetica,Arial,Geneva,sans-serif; padding:0.5em"> <code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">elem.checked</code></th> 
   <td style="padding:0.5em"><code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">true</code><span style="">&nbsp;（Boolean）将以复选框状态更改</span></td> 
  </tr> 
  <tr style="border-bottom:1px solid rgb(102,102,102)"> 
   <th style="font-family:klavika-web,&quot;Helvetica Neue&quot;,Helvetica,Arial,Geneva,sans-serif; padding:0.5em"> <code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">$( elem ).prop( "checked" )</code></th> 
   <td style="padding:0.5em"><code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">true</code><span style="">&nbsp;（Boolean）将以复选框状态更改</span></td> 
  </tr> 
  <tr style="border-bottom:1px solid rgb(102,102,102)"> 
   <th style="font-family:klavika-web,&quot;Helvetica Neue&quot;,Helvetica,Arial,Geneva,sans-serif; padding:0.5em"> <code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">elem.getAttribute( "checked" )</code></th> 
   <td style="padding:0.5em"><code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">"checked"</code><span style=""><span style="">（String）复选框的初始状态;&nbsp;</span><span style="">不改变</span></span></td> 
  </tr> 
  <tr style="border-bottom:1px solid rgb(102,102,102); background-color:rgb(238,238,238)"> 
   <th style="font-family:klavika-web,&quot;Helvetica Neue&quot;,Helvetica,Arial,Geneva,sans-serif; padding:0.5em"> <code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">$( elem ).attr( "checked" )</code>&nbsp;<span style="color:rgb(109,109,109)">（1.6）</span></th> 
   <td style="padding:0.5em"><code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">"checked"</code><span style=""><span style="">（String）复选框的初始状态;&nbsp;</span><span style="">不改变</span></span></td> 
  </tr> 
  <tr style="border-bottom:1px solid rgb(102,102,102)"> 
   <th style="font-family:klavika-web,&quot;Helvetica Neue&quot;,Helvetica,Arial,Geneva,sans-serif; padding:0.5em"> <code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">$( elem ).attr( "checked" )</code>&nbsp;<span style="color:rgb(109,109,109)">（1.6.1+）</span></th> 
   <td style="padding:0.5em"><code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">"checked"</code><span style="">&nbsp;（String）将以复选框状态更改</span></td> 
  </tr> 
  <tr style="border-bottom:1px solid rgb(102,102,102)"> 
   <th style="font-family:klavika-web,&quot;Helvetica Neue&quot;,Helvetica,Arial,Geneva,sans-serif; padding:0.5em"> <code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">$( elem ).attr( "checked" )</code>&nbsp;<span style="color:rgb(109,109,109)">（预1.6）</span></th> 
   <td style="padding:0.5em"><code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">true</code><span style="">&nbsp;（Boolean）更改为复选框状态<br> <br> </span></td> 
  </tr> 
 </tbody> 
</table>

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

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

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

Demo:

![Image 1][]![Center][]

//全选  
    $("\#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();  
        \});  
         
    \});

[Image 1]: 
[Center]: /images/20220615/7d5b18d6f5ea43ba844008f643cc9f87.png