<form id="test-form" action="test">
? ? <legend>請選擇想要學(xué)習(xí)的編程語言：</legend>
? ? <fieldset>
? ? ? ? <p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全選</span><span class="deselectAll">全不選</span></label> <a href="#0" class="invertSelect">反選</a></p>
? ? ? ? <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
? ? ? ? <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
? ? ? ? <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
? ? ? ? <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
? ? ? ? <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
? ? ? ? <p><button type="submit">Submit</button></p>
? ? </fieldset>
</form>
綁定合適的事件處理函數(shù)，實(shí)現(xiàn)以下邏輯：
當(dāng)用戶勾上“全選”時(shí)书劝，自動(dòng)選中所有語言进倍，并把“全選”變成“全不選”；
當(dāng)用戶去掉“全不選”時(shí)购对，自動(dòng)不選中所有語言猾昆；
當(dāng)用戶點(diǎn)擊“反選”時(shí)，自動(dòng)把所有語言狀態(tài)反轉(zhuǎn)（選中的變?yōu)槲催x骡苞，未選的變?yōu)檫x中）垂蜗；
當(dāng)用戶把所有語言都手動(dòng)勾上時(shí)，“全選”被自動(dòng)勾上解幽，并變?yōu)椤叭贿x”贴见；
當(dāng)用戶手動(dòng)去掉選中至少一種語言時(shí)，“全不選”自動(dòng)被去掉選中躲株，并變?yōu)椤叭x”片部。
'use strict';
var
? ? form = $('#test-form'),
? ? langs = form.find('[name=lang]'),
? ? selectAll = form.find('label.selectAll :checkbox'),
? ? selectAllLabel = form.find('label.selectAll span.selectAll'),
? ? deselectAllLabel = form.find('label.selectAll span.deselectAll'),
? ? invertSelect = form.find('a.invertSelect');
// 重置初始化狀態(tài):
form.find('*').show().off();
form.find(':checkbox').prop('checked', false).off();
deselectAllLabel.hide();
// 攔截form提交事件:
form.off().submit(function (e) {
? ? e.preventDefault();
? ? alert(form.serialize());
});
//全選按鈕邏輯：監(jiān)聽狀態(tài)改變，是否被選擇：若被選擇霜定，隱藏全選按鈕档悠，顯示全不選按鈕，并設(shè)置checked = “checked”
selectAll.change(function(){
? $(this).is(':checked') ? deselectAllLabel.show() && selectAllLabel.hide() : deselectAllLabel.hide() && selectAllLabel.show();
? langs.prop('checked', $(this).is(':checked'));
});
langs改變望浩，判斷是否滿足全選
langs.change(function(){
? langs.filter(':checked').length === langs.length ? selectAll.prop('checked', true) && deselectAllLabel.show() && selectAllLabel.hide() : selectAll.prop('checked', false) && deselectAllLabel.hide() && selectAllLabel.show();
});
反選綁定點(diǎn)擊事件辖所，非checked改為checked
invertSelect.click(function(){
? langs.each(function(){
.prop( propertyName, value ) value取 true or false 前面加！取相反
? ? $(this).prop('checked', !$(this).is(':checked'));
? });
? langs.filter(':checked').length === langs.length ? selectAll.prop('checked', true) && deselectAllLabel.show() && selectAllLabel.hide() : selectAll.prop('checked', false) && deselectAllLabel.hide() && selectAllLabel.show();
});
