zoukankan      html  css  js  c++  java
  • Jquery 组 checkbox全选checkbox


    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>

    </style>
    </head>
    <body>
    <form action="">
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
    <input id="CheckedAll" type="checkbox"/>全选/不全不选
    <input id="CheckedRev" type="button" name="items" value="反选"/>
    <input id="send" type="button" name="items" value="提交"/>
    </form>
    </body>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
    //用原生js不会有问题
    $("#CheckedAll").click(function(){
    var thisAll=this;
    if(thisAll.checked){
    $('[name=items]:checkbox').each(function(){
    this.checked=true;
    });
    }else{
    $('[name=items]:checkbox').each(function(){
    this.checked=false;
    });
    }
    });
    $('[name=items]:checkbox').click(function(){
    var flag=true;
    $('[name=items]:checkbox').each(function(){
    if(!this.checked){
    flag=false;
    }
    });
    $("#CheckedAll")[0].checked=flag;
    // $("#CheckedAll").attr('checked',flag);
    });
    $("#CheckedRev").click(function(){
    $('[name=items]:checkbox').each(function(){
    this.checked=!this.checked;
    });
    });
    $("#send").click(function(){
    var str="你选中的是: ";
    $('[name=items]:checkbox').each(function(){
    // 用this.checked或者用$(this).context.checked,用attr不行
    if(this.checked){
    str+=$(this).val()+" ";
    }
    });
    console.log(str);
    })
    </script>
    </html>
  • 相关阅读:
    C语言学习_C如何在一个文件里调用另一个源文件中的函数
    C语言学习_include<>与include""的区别
    C语言学习_一个简单程序的解释与C学习方法概括
    python_list和tuple互转
    C语言学习_恶搞小程序
    Linux命令(基础1)
    Linux基础配置
    面向对象知识补充1
    linux系统centOS在虚拟机下的自定义安装
    sql注入
  • 原文地址:https://www.cnblogs.com/dianzan/p/7366943.html
Copyright © 2011-2022 走看看