easyui combobox 复选框选择
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Combo - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script>
$(function(){ // 继承于combo也就是说具备combo的一切属性和方法，包括事件
$("#cc").combobox({
url:"action_combobox.json",
textField:"text",
valueField:"id",
multiple:true,
editable:false,
formatter:function(row){
var opts;
if(row.selected==true){
opts = "<input type='checkbox' checked='checked' id='"+row.id+"' value='"+row.id+"'>"+row.text+"</input>";
}else{
opts = "<input type='checkbox' id='"+row.id+"' value='"+row.id+"'>"+row.text+"</input>";
}
return opts;
},
panelHeight:"auto",
width:200,
onSelect:function(rec) {
oCheckbox = document.getElementById(rec.id);
oCheckbox.checked=true;
},onUnselect:function(rec){
oCheckbox = document.getElementById(rec.id);
oCheckbox.checked=false;
}
});
});
</script>
</head>
<body>
<input id="cc" name="cc">
</body>
</html>javascript
json 文件css
[{
"id":"AL",
"text":"Alabama",
"selected":false
},{
"id":"AK",
"text":"Alaska",
"selected":false
},{
"id":"AZ",
"text":"Arizona",
"selected":true
},{
"id":"AR",
"text":"Arkansas",
"selected":false
},{
"id":"CA",
"text":"California",
"selected":false
}]
html