【JQuery】checkbox 全選及全消

使用JQuery前,需要引用Jquery元件

HTML 頁面
<form id="ManagerAddForm">
  <input type="checkbox" name="SubModuleID[]" value="1" class="chk" /> 選擇_1 <br/>
  <input type="checkbox" name="SubModuleID[]" value="2" class="chk" /> 選擇_2 <br/>
  <input type="checkbox" name="SubModuleID[]" value="3" class="chk" /> 選擇_3 <br/>
  <input type="checkbox" name="SubModuleID[]" value="4" class="chk" /> 選擇_4 <br/>
  <input type="checkbox" name="SubModuleID[]" value="5" class="chk" /> 選擇_5 <br/>
  <br/>
  <a href="javascript:;" id="btn_selectall">全選</a> |
<a href="javascript:;" id="btn_selectall_no">全消</a>
</form>

Javascript 部份
<script language="javascript">
  //實作全選及全消
  $(function() {
    $("#btn_selectall").click(function() {
      $('#ManagerAddForm input:checkbox.chk').each(function(){              
        this.checked = 'checked';
      });
    });
 
    $("#btn_selectall_no").click(function() {
      $('#ManagerAddForm input:checkbox.chk').each(function(){
        this.checked = '';
      });
    });
  });
</script>

全選狀態

全消狀態