zoukankan      html  css  js  c++  java
  • Jquery 中checkbox简单实用选择器

    1、JS部分:

      有时候碰到常用的checkbox选择的时候容易忘,今天有时间稍微记下来

        <script src="../script/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
    
                $("#btn1").click(function () {//全选
                    $("input[name='chekItem']").each(function () {
                        $(this).attr("checked",true);
                    });
                });
    
                $("#btn2").click(function () {//取消全选
                    $("input[name='chekItem']").removeAttr("checked");
                });
    
                $("#btn3").click(function () {//反选
                    $("input[name='chekItem']").each(function () {
                        if ($(this).attr('checked')) {
                            $(this).removeAttr('checked');
                        }
                        else {
                            $(this).attr("checked", true);
                        }
                    });
                });
    
                $("#btn4").click(function () {//选中所有偶数同时去掉奇数的选中
                    $("input[name='chekItem']:odd").each(function () {
                        $(this).attr("checked", true);
                    });
                    $("input[name='chekItem']:even").each(function () {
                        $(this).attr("checked", false);
                    });
                });
    
                $("#btn5").click(function () {//输出选中的值
                    var str = "";
                    $('input[name="chekItem"]:checked').each(function () {
                        str += $(this).val() + "
    ";
                        alert($(this).val());
                    });
                    alert(str);
                });
    
            })
        </script>

    HTML部分:

    <body>
     <input type="checkbox" name="chekItem"  value="苹果"/>苹果
     <input type="checkbox" name="chekItem"  value="香蕉"/>香蕉
     <input type="checkbox" name="chekItem"  value="葡萄"/>葡萄
     <input type="checkbox" name="chekItem"  value="桃子"/>桃子
     <br />
     <br />
     <br />
     <br />
     <br />
     <br />
     <input type="button" id="btn1" value="全选" />
     <input type="button" id="btn2" value="取消全选 " />
     <input type="button" id="btn3" value="反选 " />
     <input type="button" id="btn4" value="选中所有偶数 " />
     <input type="button" id="btn5" value="输出选中的值 " />
    </body>
  • 相关阅读:
    二分查找(Binary Search)的几种变种形式
    深入理解jvm虚拟机读书笔记-垃圾收集器与内存分配策略(二)
    深入理解jvm虚拟机读书笔记-垃圾收集器与内存分配策略(一)
    Java8函数式编程
    Spring DBUnit 插入数据的时候如何处理自增ID
    IDEA Debug 技巧总结
    声明
    Mybatis最详细笔记
    关于jdbc概述
    SpringAOP(动态代理)
  • 原文地址:https://www.cnblogs.com/gxmaspx/p/3341014.html
Copyright © 2011-2022 走看看