使用jQuery多个复选框选择/取消

几乎所有我已创建的用户界面有此功能处理或删除它们从列表中选择多个项目。虽然它很容易在JavaScript中实现这一功能，使用jQuery，这是真正的乐趣。我会告诉你一个简单的实现多个复选框选择和取消选择的功能添加到任何网页。我们将有一个表，并在每一行的复选框中的一些数据。会有一个选择都在表头的复选框。如果用户选择/取消全选“复选框，将得到表中的所有复选框选中或取消相应。现在还有一件事，我们想在这里补充的是，假设用户选择所有的复选框，然后全选“复选框应该自动被选中。如果用户单击“全选第一个，然后取消选中任何复选框，然后全选也应该选中自动。

< HTML >

< HEAD >

     < script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></ script >

     < TITLE >Multiple Checkbox Select/Deselect - DEMO</ TITLE >

</ HEAD >

< BODY >

     < H2 >Multiple Checkbox Select/Deselect - DEMO</ H2 >

< table border = "1" >

< tr >

     < th >< input type = "checkbox" id = "selectall" /></ th >

     < th >Cell phone</ th >

     < th >Rating</ th >

</ tr >

< tr >

     < td align = "center" >< input type = "checkbox" class = "case" name = "case" value = "1" /></ td >

     < td >BlackBerry Bold 9650</ td >

     < td >2/5</ td >

</ tr >

< tr >

     < td align = "center" >< input type = "checkbox" class = "case" name = "case" value = "2" /></ td >

     < td >Samsung Galaxy</ td >

     < td >3.5/5</ td >

</ tr >

< tr >

     < td align = "center" >< input type = "checkbox" class = "case" name = "case" value = "3" /></ td >

     < td >Droid X</ td >

     < td >4.5/5</ td >

</ tr >

< tr >

     < td align = "center" >< input type = "checkbox" class = "case" name = "case" value = "4" /></ td >

     < td >HTC Desire</ td >

     < td >3/5</ td >

</ tr >

< tr >

     < td align = "center" >< input type = "checkbox" class = "case" name = "case" value = "5" /></ td >

     < td >Apple iPhone 4</ td >

     < td >5/5</ td >

</ tr >

</ table >

 

</ BODY >

</ HTML >

jQuery代码

加入后，在头上面的HTML部分中的jQuery代码

<SCRIPT language= "javascript" >

$( function (){

 

     // add multiple select / deselect functionality

     $( "#selectall" ).click( function () {

           $( '.case' ).attr( 'checked' , this .checked);

     });

 

     // if all checkbox are selected, check the selectall checkbox

     // and viceversa

     $( ".case" ).click( function (){

 

         if ($( ".case" ).length == $( ".case:checked" ).length) {

             $( "#selectall" ).attr( "checked" , "checked" );

         } else {

             $( "#selectall" ).removeAttr( "checked" );

         }

 

     });

});

</SCRIPT>

在这里，我们在上面的代码行05注册处理程序上单击“全选”复选框。 点击这个复选框，我们检查/取消所有复选框中的DataTable。