fieldset的简单示例如下
<form>
<fieldset>
<legend>查询结果</legend>
得分:<input type="text" />
88:<input type="text" />
</fieldset>
</form>
结合jQuery实现fieldset的滑动效果(slideUp 和slideDown):
slideUp(展开、slideDown(收缩-----------------------速度快慢 fast slow
<label>种类:</label>
<select id="Type" name="Type">
<option value="">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label>名称:</label>
<input type="text" id="Name" name="Name" />
<label>状态:</label>
全部: <input type="checkbox" id="Status" name="Status" value=""/>
未:<input type="checkbox" id="Status" name="<span style="font-family: Arial, Helvetica, sans-serif;">Status</span>" value="1"/>
已:<input type="checkbox" id="Status" name="Status" value="0"/>
<input type="submit" value="查询" />
-----------------------------------------------以上为查询条件------------------------------------------------------------
<fieldset id="resultDiv" class="hidden">
<legend>查询结果</legend>
<div id="dataDiv">
<table>
<thead>
<tr>
<span style="white-space:pre"> </span><th>租借状态</th>
</tr>
</thead>
<tbody id="resultData">
<span style="white-space:pre"> </span><tr>
<span style="white-space:pre"> </span><td><a href="javascript:void(0)" οnclick="delBook(@item.ID)">删除</a></td>
<span style="white-space:pre"> </span></tr>
</tbody>
</table>
</div>
<div id="nodataDiv">
</div>
</fieldset>
js中数据如下
<script>
$(function () {
$("#Status").change(function () {
$("#resultData").slideUp("fast");//状态改变的时候快速收起
});
$("#Type").change(function () {
$("#resultData").slideUp("fast");
});
})
</script>
js中多选checkbox或者radio
var sortColumns = "";
$('input[name="sortColumn"]:checked').each(function () {
if (sortColumns.length > 0) {
sortColumns += "_";
}
sortColumns += $(this).val();
});