可单选或多选的jQuery选择小插件

一款可单选或多选的jQuery选择小插件，演示页面给出了多选、单选、默认已选的几种效果，选择的内容会有不同的图标显示，可以点击“扫帚”图标来清除已选内容。

分类：表单代码 > 复选框难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入图标字体样式和选择插件样式、jQuery库和选择插件，代码如下：

<link type="text/css" rel="stylesheet" href="css/iconfont.css"/>
<link type="text/css" rel="stylesheet" href="css/multiselect.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/multiselect.js"></script>

页面的body部分，设置不同选择类型的对应容器，代码如下：

<h3>多选：</h3>
<div id="test"></div>
<span>结果：</span><input type="text" id="testValue"/>

<h3>单选：</h3>
<div id="test2"></div>
<span>结果：</span><input type="text" id="testValue2"/>

<h3>已选:</h3>
<div id="test3"></div>
<span>结果：</span><input type="text" id="testValue3"/>

<h3>关于选择类型（checkStyle）:</h3>
<div style="height: 25px"><b style="margin-right: 10px;"><span>yx(圆心):</span></b><span><i class="iconfont icon-xuanzhong"></i></span><span><i class="iconfont icon-weixuanzhong1"></i></span></div>
<div style="height: 25px"><b style="margin-right: 10px;"><span>yg(圆钩):</span></b><span><i class="iconfont icon-xuanzhong1"></i></span><span><i class="iconfont icon-weixuanzhong1"></i></span></div>
<div style="height: 25px"><b style="margin-right: 10px;"><span>fx(方心):</span></b><span><i class="iconfont icon-CombinedShapeCopy"></i></span><span><i class="iconfont icon-weixuanzhong"></i></span></div>
<div style="height: 25px"><b style="margin-right: 10px;"><span>fg(方钩):</span></b><span><i class="iconfont icon-xuanzhong3"></i></span><span><i class="iconfont icon-weixuanzhong"></i></span></div>

页面的底部，对指定容器启用插件并设置好相应参数，代码如下：

$("#test").multiselectInit({
    "selectData":[{"colId":1,"colValue":"苹果"},{"colId":2,"colValue":"香蕉"},{"colId":3,"colValue":"菠萝"},{"colId":4,"colValue":"西瓜"},{"colId":5,"colValue":"甘蔗"}],
    "isMulti":true,//是否多选
    "inputId":"testValue",//输入框的id
    "checkStyle":"fg"//选择的样式
});
$("#test2").multiselectInit({
    "selectData":[{"colId":1,"colValue":"苹果"},{"colId":2,"colValue":"香蕉"},{"colId":3,"colValue":"菠萝"},{"colId":4,"colValue":"西瓜"},{"colId":5,"colValue":"甘蔗"}],
    "isMulti":false,//是否多选
    "inputId":"testValue2",//输入框的id
    "checkStyle":"yx"//选择的样式
});
$("#test3").multiselectInit({
    "selectData":[{"colId":1,"colValue":"苹果"},{"colId":2,"colValue":"香蕉"},{"colId":3,"colValue":"菠萝"},{"colId":4,"colValue":"西瓜"},{"colId":5,"colValue":"甘蔗"}],
    "isSelectData":[{"colId":1,"colValue":"苹果"},{"colId":2,"colValue":"香蕉"},{"colId":3,"colValue":"菠萝"}],
    "isMulti":true,//是否多选
    "inputId":"testValue3",//输入框的id
    "checkStyle":"fx"//选择的样式
});