<!--复选框的全选和反选-->
<input type="checkbox" name="id"/>苹果<br>
<input type="checkbox" name="id"/>橘子<br>
<input type="checkbox" id = "all">全选/反选<br>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#all").click(function(){
var isChecked = $(this).prop("checked");
$("input[name='id']").prop("checked",isChecked);
});
})
</script>
<!--下拉框的移动操作-->
<style type="text/css">
select{
width: 150px;
height: 200px;
}
</style>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
//右移选中
$(".rightMove").click(function(){
$("#perm option:selected").appendTo("#selperm");
$("#selperm option:selected").removeAttr("selected");
})
//全部右移
$(".rightMoveAll").click(function(){
$("#perm option").appendTo("#selperm");
$("#selperm option:selected").removeAttr("selected");
})
//左移选中
$(".leftMove").click(function(){
$("#selperm option:selected").appendTo("#perm");
$("#perm option:selected").removeAttr("selected");
})
//全部左移
$(".leftMoveAll").click(function(){
$("#selperm option").appendTo("#perm");
$("#perm option:selected").removeAttr("selected");
})
//双击右移选项
$("#perm").dblclick(function(){
$("option:selected",this).appendTo("#selperm");
$("#selperm option:selected").removeAttr("selected");
})
//双击左移选项
$("#selperm").dblclick(function(){
$("option:selected",this).appendTo("#perm");
$("#perm option:selected").removeAttr("selected");
})
})
</script>
</head>
<body>
<table>
<tr>
<td>
<select id="perm" multiple="multiple">
<option >登录</option>
<option >注册</option>
<option >修改</option>
</select>
</td>
<td>
<input type="button" value=">" style="height:25px;width:40px;" class="rightMove"/><br>
<input type="button" value=">>" style="height:25px;width:40px;" class="rightMoveAll"/><br>
<input type="button" value="<" style="height:25px;width:40px;" class="leftMove"/><br>
<input type="button" value="<<" style="height:25px;width:40px;" class="leftMoveAll"/><br>
</td>
<td>
<select id="selperm" multiple="multiple"></select>
</td>
</tr>
</table>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
