jquery对表单操作2_jquery

checkbox的级联效果

复制代码 代码如下:

你爱好的运动？

全选/全不选

足球
篮球
羽毛球
乓球球

$('#CheckedAll').click(function(){
$('[name=items]:checkbox').attr("checked", this.checked);
})

当单击id为"CheckedAll"的复选框后，复选框组将被选中，当在复选框组中取消某一个选项的选中状态时，id为"CheckedAll"的复选框并没有被取消选中状态。
为解决这个问题：

复制代码 代码如下:

$('[name=items]:checkbox').click(
function(){
var flag = true;
$('[name=items]:checkbox').each(function(){
if(!this.checked)
flag = false;
});
$('#CheckedAll').attr('checked', flag);
})
//或者可以用复选框的总数与选中复选框数量相等
$('[name=items]:checkbox').click(
function(){
var $tmp = $('[name=items]:checkbox');
//使用filter方法筛选出复选框，并直接给CheckedAll赋值
$('#CheckedAll').attr('checked', $tmp.length == $tmp.filter(':checked').length);
})

下拉框的应用

复制代码 代码如下:

选项1
选项2
选项3
选项4
选项5
选项6
选项7

选中添加到右边
全部添加到右边

选中添加到左边
全部添加到左边

//将选中的选项添加给对方
$('#add').click(function(){
var $options = $('#select1 option:selected');//获取选中的选项
$options.appendTo('#select2');//追加给对方
});
//将全部的选项添加给对方
$('#add').click(function(){
var $options = $('#select1 option');//获取选中的选项
$options.appendTo('#select2');//追加给对方
});
//双击某个选项添加给对方
$('#select1').dblclick(function(){
var $options = $('option:selected',this);//获取选中的选项
$options.appendTo('#select2');//追加给对方
})

PS: $('option:selected',this),$()有2个参数，一个是选择器，一个是作用域。相当于$('#select1 option:selected')