jquery边学边练2--用ul li实现单选框和复选框功能(强化版，优化版)

在上一个版本（http://www.cnblogs.com/coffee_cn/archive/2010/06/02/1750225.html）的基础上把js部分代码调整的稍微通用一些，

当需要添加“单选框”或“复选框”时，直接拷贝html代码即可。 

 

< script  src ="jquery-1.3.2.min.js" ></ script >

< script  language ="javascript" >
$(document).ready( function () {
    $( " .checkbox li,.radio li " ).click( function (){
        $( this ).toggleClass( " checked " );

         var  id  =  $( this ).parent().attr( " id " );
         var  type  =  $( this ).parent().attr( " class " );
         var  nonevalue  =  $( this ).parent().attr( " nonevalue " );
         var  othervalue  =  $( this ).parent().attr( " othervalue " );
         if (type == ' undefined ' ) type = ' checkbox ' ;
         if (nonevalue == ' undefined ' ) nonevalue = ' 0 ' ;
         if (othervalue == ' undefined ' ) othervalue = ' -1 ' ;

         var  array_value  =   new  Array();
         var  value  =  $( this ).attr( " value " );

         if (type == ' radio ' ) {
            $( " # " + id + "  li[value!=' " + value + " '] " ).removeClass( " checked " );
        }

         if (value == nonevalue) {
            $( " # " + id + "  li[value!=' " + nonevalue + " '] " ).removeClass( " checked " );

            array_value  =   new  Array(nonevalue);
        }  else  {
            $( " # " + id + "  li[value=' " + nonevalue + " '] " ).removeClass( " checked " );

            $( " # " + id + "  li[class='checked'] " ).each( function (){
                array_value.push($( this ).attr( " value " ));
            });
        }

        $( " # " + id + " _value " ).val(array_value.join( " , " ));
    });
});
Array.prototype.contains  =   function  (element) { 
     for  ( var  i  =   0 ; i  <   this .length; i ++ ) { 
         if  ( this [i]  ==  element) { 
             return   true ; 
        } 
    } 
     return   false ; 
}
</ script >

< style >
.checkbox li, .radio li  {
    display :  inline ;
    margin :  6px ;
}
.checked  {
 background-color :  #ff0000 ;
 font-weight :  bold ;
}
</ style >


多选框1  < input  type ="text"  id ="checkbox1_value"  value ="1" >< br />
< ul  id ="checkbox1"  class ="checkbox"  nonevalue ="0"  othervalue ="9" >
< li  value ="1"  class ="checked" > 1.li1 </ li >
< li  value ="2" > 2.li2 </ li >
< li  value ="3" > 3.li3项目3 </ li >
< li  value ="4" > 4.li4 </ li >
< li  value ="5" > 5.li5项目5 </ li >
< li  value ="6" > 6.li6 </ li >
< li  value ="7" > 7.li7项目7 </ li >
< li  value ="8" > 8.li8 </ li >
< li  value ="0" > 0.li无 </ li >
</ ul >
< br />


单选框1  < input  type ="text"  id ="radio1_value"  value ="2" >< br />
< ul  id ="radio1"  class ="radio" >
< li  value ="1" > 1.li1 </ li >
< li  value ="2"  class ="checked" > 2.li2 </ li >
< li  value ="3" > 3.li3 </ li >
< li  value ="4" > 4.li4 </ li >
</ ul >
< br />

 

 

当需要添加“单选框”或“复选框”的时候，直接拷贝代码，修改红色部分内容即可。

单选框2 <input type="text" id="radio2_value" value="2"><br/>
<ul id="radio2" class="radio">
<li value="1">1.li1</li>
<li value="2" class="checked">2.li2</li>
<li value="3">3.li3</li>
<li value="4">4.li4</li>
</ul>
<br/>