JS下拉复选框的实现
浏览数：28 /
时间：2015年06月09日
<html>
<head>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.easyui.min.js" ></script>
<link rel="stylesheet" href="css/themes/metro/easyui.css" ></link>
<link rel="stylesheet" href="css/themes/icon.css" ></link>
</head>
<body>
<form class="ui-forms p20" >
<input type="text" id="ysvalue" >
<fieldset>
<legend>反作弊数据导出</legend>
<div class="pt20">
<table>
<tr>
<td><label style="float: none">团单 </label>
<input type="text" id="byJobName" name="byJobName" value="" size="20" ></td>
<td><input type="checkbox" id="byJobName" name="byJobName" value="" size="20" >只看黑名单团单</td>
</tr>
<tr>
<td><label style="float: none">订单ID</label>
<input type="text" id="byJobClass" name="byJobClass" value="" size="20" ></td>
<td><label style="float: none">券码ID</label>
<input type="text" id="byJobClass" name="byJobClass" value="" size="20" ></td>
</tr>
<tr>
<td><label style="float: none">预算</label>
<select id="cc" style="width:150px"></select>
<span style="white-space:pre"> </span> <div id="sp">
<span style="white-space:pre"> </span> <input type="checkbox" id="ysqu" value="01" onclick="ysqx();"><span>全选</span><br/>
<span style="white-space:pre"> </span> <input type="checkbox" id="lang" value="01"><span>Java</span><br/>
<span style="white-space:pre"> </span> <input type="checkbox" id="lang" value="02"><span>C#</span><br/>
<span style="white-space:pre"> </span> <input type="checkbox" id="lang" value="03"><span>Ruby</span><br/>
<span style="white-space:pre"> </span> <input type="checkbox" id="lang" value="04"><span>Basic</span><br/>
<span style="white-space:pre"> </span> <input type="checkbox" id="lang" value="05"><span>Fortran</span>
<span style="white-space:pre"> </span> </div>
</td>
<td> </td>
<td><button type="button" class="ui-button-red ui-button ui-widget ui-Status-default ui-corner-all ui-button-text-only" onclick="search();" > 查 询 </button>
<button type="button" id="btnReset" name="btnReset" class="ui-button-red ui-button ui-widget ui-Status-default ui-corner-all ui-button-text-only" > 重 置 </button>
</td>
</tr></table>
</div>
</fieldset>
</form>
<body>
</html>
<script type="text/javascript">
// ready后把复选框列表加载到对应的select组里
$(function(){
$('#cc').combo({required:true,editable:false});
$('#sp').appendTo($('#cc').combo('panel'));
$('#sp input').click(function(){
var s = "";
if ($(this).attr("checked")){
// 当前复选框是选中状态
s = $(this).next('span').text();
$('#cc').combo('setText', s);
} else {
// 当前复选框是非选中状态，则找最近一个选中的状态，如果没有返回空值
for (var i=0;i<lang.length;i++ ){
if(lang[i].checked){
s = $(lang[i]).next('span').text();
break;
}
}
$('#cc').combo('setText', s);
}
});
});
// 点击查询按钮
function search(){
var value = "";
for (var i=0;i<lang.length;i++ ){
if(lang[i].checked){
value=value+lang[i].value + ",";
}
}
// 获取所有选中的复选框的值，把值填充到一个text里方便后面使用
ysvalue.value = value;
}
// 预算下拉复选框全选
function ysqx(){
if (ysqu.checked) {
// 选中全选，让所有复选框选中
for (var i=0;i<lang.length;i++ ){
lang[i].checked = true;
}
} else {
// 取消全选
for (var i=0;i<lang.length;i++ ){
lang[i].checked = false;
}
}
}
</script>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
