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 class="content">
<select multiple id="select1" style="width:100px;height:100px;">
<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 class="content">
<select multiple id="select2" style="width:100px;height:100px;">
</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')