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/>