checkbox的级联效果

复制代码 代码如下:

<form>

你爱好的运动？<br/>

<input type="checkbox" id="CheckedAll" />全选/全不选<br/>

<input type="checkbox" name="items" value="足球"/>足球

<input type="checkbox" name="items" value="篮球"/>篮球

<input type="checkbox" name="items" value="羽毛球"/>羽毛球

<input type="checkbox" name="items" value="乒乓球"/>乓球球

<input type="button" id="send" value="提 交"/>

$('#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);

})

下拉框的应用

复制代码 代码如下:

<div>

<select multiple id="select1">

<option value="1">选项1</option>

<option value="2">选项2</option>

<option value="3">选项3</option>

<option value="4">选项4</option>

<option value="5">选项5</option>

<option value="6">选项6</option>

<option value="7">选项7</option>

</select>

<div>

<span id="add">选中添加到右边</span>

<span id="add_all">全部添加到右边</span>

</div>

</div>

<div>

<select multiple id="select2">

</select>

<div>

<span id="add">选中添加到左边</span>

<span id="add_all">全部添加到左边</span>

</div>

<div>

//将选中的选项添加给对方

$('#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')