您的位置：首页 > Web前端 > JQuery

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

2016-10-19 15:00 513 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航

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

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