全选反选,随点击的复选框状态改变复选框的状态只读

本文介绍了一个简单的网页示例，通过JavaScript实现了对多个复选框的全选、全不选及反选功能。利用jQuery简化了DOM操作，使得开发者能够轻松地控制页面上的复选框状态。

<!DOCTYPE <html>
</html>
<html lang="en">
<head>
   <script src="./jq.js"></script>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
   <input type="checkbox" value="php">php
   <input type="checkbox" value="mysql">mysql<br>
   <input type="checkbox" value="apache">apache
   <input type="checkbox" value="checkbox" checked="checked">js
   <input disabled='disabled' type="checkbox" id='all' value="js">全选全不选复选框disabled='disabled'不可操作
   <button id="quan">全选</button>
   <button id="fan">反选</button>
   <button id="quanbu">全不选</button>
</body>
</html>
<script>
   $('#quan').click(function () {
       $('input').prop('checked',true)
   }),
   $('#quanbu').click(function () {
       $('input').prop('checked',false)
   })
   $('#fan').click(function () {
       $('input').each(function (k,v) {
           //console.log(k+v)
           if ($(v).prop('checked')==true){
               $(v).prop('checked',false)
           }else{
               $(v).prop('checked',true)
           }
       })
   })
   //所有input标签中的checked属性的状态点击后$(this).is(":checked")判断被点击的状态如果是true则返回true 那么所有input的checked属性值都是true   prop可重复使用
   $('#all').click(function () {
       $('input').prop('checked',$(this).is(":checked"))
   })
</script>