jQuery實現表單全選、全不選以及反選的功能
阿新 • • 發佈:2018-12-31
本文主要介紹了利用jQuery實現表單的全選、全不選以及反選的功能。
對如下的form表單:
<!-- HTML結構 -->
<form id="test-form" action="test">
<legend>請選擇想要學習的程式語言:</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>
繫結合適的事件處理函式,實現以下邏輯:
當用戶勾上“全選”時,自動選中所有語言,並把“全選”變成“全不選”;
當用戶去掉“全不選”時,自動不選中所有語言;
當用戶點選“反選”時,自動把所有語言狀態反轉(選中的變為未選,未選的變為選中);
當用戶把所有語言都手動勾上時,“全選”被自動勾上,並變為“全不選”;
當用戶手動去掉選中至少一種語言時,“全不選”自動被去掉選中,並變為“全選”。
'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');
// 重置初始化狀態:
form.find('*').show().off();
form.find(':checkbox').prop('checked', false).off();
deselectAllLabel.hide();
// 攔截form提交事件:
form.off().submit(function (e) {
e.preventDefault();
alert(form.serialize());
});
//以下是重點:
selectAllLabel.click(function(){//當用戶勾上“全選”時,自動選中所有語言,並把“全選”變成“全不選”;
langs.prop('checked',true);
selectAllLabel.hide();
deselectAllLabel.show();
});
deselectAllLabel.click(function(){//當用戶去掉“全不選”時,自動不選中所有語言;
langs.prop('checked',false);
deselectAllLabel.hide();
selectAllLabel.show();
});
invertSelect.click(function(){//當用戶點選“反選”時,自動把所有語言狀態反轉(選中的變為未選,未選的變為選中);
langs.map(function(){
$(this).prop('checked',!$(this).prop('checked'));
});
});
langs.map(function(){
$(this).change(function(){//當用戶把所有語言都手動勾上時,“全選”被自動勾上,並變為“全不選”;
if($('[name=lang]:checked').length==5){
selectAll.prop('checked',true);
selectAllLabel.hide();
deselectAllLabel.show();
}else{//當用戶手動去掉選中至少一種語言時,“全不選”自動被去掉選中,並變為“全選”。
selectAll.prop('checked',false);
selectAllLabel.show();
deselectAllLabel.hide();
}
});
});
福利補充:以下是某大神的解決方案,僅供參考。
function updateLabel() {
let allChecked = langs.filter(':checked').length === langs.length
selectAll.prop('checked', allChecked)
if (allChecked) {
selectAllLabel.hide()
deselectAllLabel.show()
} else {
selectAllLabel.show()
deselectAllLabel.hide()
}
}
selectAll.change(function(e) {
langs.prop('checked', $(this).is(':checked'))
updateLabel()
})
invertSelect.click(function(e) {
langs.click()
})
langs.change(() => updateLabel())