checkbox 核取方塊全選程式碼

antzone發表於2018-11-18

核取方塊全選效果大家應該都不陌生，大量網站都有應用。

具有批量管理功能的網站更是如此，下面分享一個具有全選功能的例子。

程式碼如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>核取方塊全選程式碼例項-螞蟻部落</title> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(function(){ 
  var checkboxes = $('input[name=choose]'); 
  var btn = $('#btn'); 
  var btn2 = $('#btn2'); 
  btn.click(function(){ 
    checkboxes.prop('checked',this.checked); 
  }); 
  checkboxes.click(function(){ 
    var flag = true; 
    checkboxes.each(function(){ 
      if(!this.checked) flag = false; 
    }); 
    btn.attr('checked',flag); 
  }); 
  btn2.click(function(){ 
    var flag = true; 
    checkboxes.each(function(){ 
      this.checked = !this.checked; 
      if(!this.checked) flag = false; 
    }); 
    btn.attr('checked',flag); 
  })
})
</script> 
</head> 
<body> 
<input type="checkbox" name="btn" id="btn"/><label for="btn">全選/全不選</label><br/> 
<input type="checkbox" name="choose" id="checkbox1"/><label for="checkbox1">選項1</label><br/> 
<input type="checkbox" name="choose" id="checkbox2"/><label for="checkbox2">選項2</label><br/> 
<input type="checkbox" name="choose" id="checkbox3"/><label for="checkbox3">選項3</label><br/> 
<input type="checkbox" name="choose" id="checkbox4"/><label for="checkbox4">選項4</label><br/> 
<input type="checkbox" name="choose" id="checkbox5"/><label for="checkbox5">選項5</label><br/> 
<input type="checkbox" name="choose" id="checkbox6"/><label for="checkbox6">選項6</label><br/> 
<input type="checkbox" name="choose" id="checkbox7"/><label for="checkbox7">選項7</label><br/> 
<input type="checkbox" name="choose" id="checkbox8"/><label for="checkbox8">選項8</label><br/> 
<input type="checkbox" name="choose" id="checkbox9"/><label for="checkbox9">選項9</label><br/> 
<input type="checkbox" name="choose" id="checkbox10"/><label for="checkbox10">選項10</label><br/> 
<a href="javascript:;" id="btn2">反選</a> 
</body> 
</html>

上面程式碼實現了核取方塊的全選和全不選效果。

相關文章