jquery實現全選全不選的案例
阿新 • • 發佈：2018-11-30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> </head> <body> <!-- 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></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> </fieldset> </form> </body> <script> 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'); // 重置初始化狀態: form.find('*').show().off(); form.find(':checkbox').prop('checked', false).off(); deselectAllLabel.hide(); //以下是重點： selectAllLabel.click(function(){//當用戶勾上“全選”時，自動選中所有語言，並把“全選”變成“全不選”； langs.prop('checked',true); selectAllLabel.hide(); deselectAllLabel.show(); }); deselectAllLabel.click(function(){//當用戶去掉“全不選”時，自動不選中所有語言； langs.prop('checked',false); deselectAllLabel.hide(); selectAllLabel.show(); }); 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() }) langs.change(() => updateLabel()) </script> </html>