<script type="text/javascript">

 $(function(){

     //全选

     $("#CheckedAll").click(function(){

         $('[name=items]:checkbox').attr("checked", this.checked );

     });

     $('[name=items]:checkbox').click(function(){

         //定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提升程序效率。

         var $tmp=$('[name=items]:checkbox');

         //用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。

         $('#CheckedAll').attr('checked', $tmp.length==$tmp.filter(':checked').length);

     });

     //输出值

     $("#send").click(function(){

        var str="你选中的是：\r\n";

        $('[name=items]:checkbox:checked').each(function(){

            str+=$(this).val()+"\r\n";

        })

        alert(str);

     });

  });

  </script>

</head>

<body>

<form method="post" action="">

    <b>你爱好的运动是?</b><br/>

    <input type="checkbox" id="CheckedAll" />全选/全不选<br/>

    <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 type="button" id="send" value="提　交"/>

</form>

</body>

jQuery 复选框全选反选的更多相关文章

  1. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  2. jQuery 前端复选框 全选 反选 下拉菜单联动

    jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...

  3. Jquery表格变色 复选框全选，反选

    /*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...

  4. jQuery实现复选框 全选、反选、全不选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  5. jQuery 实现复选框全选、反选及获取选中的值

    实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...

  6. 复选框全选、全不选和反选的效果实现VIEW:1592

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  9. jQuery中的几个案例：隔行变色、复选框全选和全不选

    1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...

  10. vue+vant-UI框架写的购物车的复选框全选和反选

    购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...

随机推荐

  1. ZOJ2930 The Worst Schedule（最小割）

    题目大概说有n个任务,每个任务可以提前或推迟,提前或推迟各有一定的费用,有的任务一旦推迟另一个任务也必须推迟,问怎么安排任务使花费最少,且最少花费的条件下提前的任务数最多能多少. 问题就是要把各个任务 ...

  2. ！ cocos2d 同一个sprite的触控问题

    如果对一个A sprite添加触控,然后在一个场景中创建四个A的实例,那么1234逐个添加的话,只有最后一个会被点击到.其他的将不会响应.

  3. 【Vijos】1218 数字游戏

    题目链接:https://vijos.org/p/1218 算法:环形DP+划分型DP 环形DP的思路很简单,将1~n中每一个节点当成起点进行划分型DP即可,关于划分型DP前面论文有介绍~查找tag把 ...

  4. js 字符串中取得第一个字符和最后一个字符

    var str = "Hello World";// 删除第一个字符 H,结果为 ello World alert(str.slice(1));// 删除最后一个字符 d,结果为 ...

  5. WPF 一个数据库连接测试的实现

    要实现的功能效果图如下:因为我们要测试数据是从输入框获得的,所以,我们的连接字符串不是写死在应用程序中的.下面我就详细介绍一下.

  6. AngularJS系列：表单全解（表单验证，radio必选，三级联动，check绑定，form提交验证）

    一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...

  7. 前端CSS参考阅读

    CSS 2.2 W3标准 http://dev.w3.org/csswg/css2/ CSS2 中文翻译 http://files.cnblogs.com/files/mize/CSS2_Chines ...

  8. faker image

    $faker->image http://placehold.it http://placekitten.com/g/200/300 带文字 https://placeholdit.imgix. ...

  9. PHP关闭提示、打印配置

    打印配置 PHP.exe -i > Info.txt 关闭 PHP 提示的方法 搜索php.ini: error_reporting = E_ALL 改为: error_reporting = ...

  10. How to Write a Spelling Corrector

    http://norvig.com/spell-correct.html Feb 2007to August 2016 How to Write a Spelling Corrector One we ...