1.概述
在項目中經常遇到列表中對復選框進行勾選操作，全選。。。反選。。
2. example
<html><body><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><script src="jquery-3.1.0.js"></script><script type="text/javascript">$(function(){(function(){varform = $('#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());});var count = 1; //點擊全選/全不選框次數selectAll.click(function(){if(count++ %2){selectAllLabel.hide();deselectAllLabel.show();$(this).prop("checked", false);langs.prop("checked", true);}else {selectAllLabel.show();deselectAllLabel.hide();$(this).prop("checked", false);langs.prop("checked", false);}});invertSelect.on('click', function(){langs.map(function(){$(this).prop('checked', !this.checked);});});})();});</script></body></html>以上所述是小編給大家介紹的jQuery 全選 全部選 反選 實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
