zoukankan      html  css  js  c++  java
  • jquey 批量操作 checkbox

    <html>
    <head runat="server">
        <meta charset="utf-8" />
    <title>无标题页</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js" ></script>

    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <div class="ceshi"></div>
    <input type="button" id="btn1" value="全选">
    <input type="button" id="btn2" value="取消全选">
    <input type="button" id="btn3" value="选中所有奇数">
    <input type="button" id="btn6" value="选中所有偶数">
    <input type="button" id="btn4" value="反选">
    <input type="button" id="btn5" value="获得选中的所有值">
    <input type="checkbox" id="btny" value=""><span id="dohovertree">全选</span>
    <br>

    <input type="checkbox" name="checkbox" value="1">
    checkbox1
    <input type="checkbox" name="checkbox" value="2">
    checkbox2
    <input type="checkbox" name="checkbox" value="3">
    checkbox3
    <input type="checkbox" name="checkbox" value="4">
    checkbox4
    <input type="checkbox" name="checkbox" value="5">
    checkbox5
    <input type="checkbox" name="checkbox" value="6">
    checkbox6
    <input type="checkbox" name="checkbox" value="7">
    checkbox7
    <input type="checkbox" name="checkbox" value="8">
    checkbox8
    </div>
    </form>
    <script type="text/javascript">
    jQuery(function($){
    //全选
    $("#btn1").click(function(){
    $("input[name='checkbox']").attr("checked","true");
    })
    //取消全选
    $("#btn2").click(function(){
    $("input[name='checkbox']").removeAttr("checked");
    })
    //选中所有基数
    $("#btn3").click(function(){
    $("input[name='checkbox']:even").attr("checked","true");
    })
    //选中所有偶数
    $("#btn6").click(function(){
    $("input[name='checkbox']:odd").attr("checked","true");
    })
    //反选
    $("#btn4").click(function(){
    $("input[name='checkbox']").each(function(){
    if($(this).attr("checked"))
    {
    $(this).removeAttr("checked");
    }
    else
    {
    $(this).attr("checked","true");
    }
    })
    })
    //全选/全不选
     $("#btny").click(function() {
                    var checkboxs = document.getElementsByName("checkbox");
                    var hvtck = $(this).val();
                    var cklen = checkboxs.length;
                    var num=0;
                    var aa="";
                    if (this.checked == true) {
                        for (var i = 0; i < cklen; i++) {
                            checkboxs[i].checked = true;
                        }
                        document.getElementById("dohovertree").innerHTML = "取消"
                    } else {
                        for (var i = 0; i < cklen; i++) {
                            checkboxs[i].checked = false;
                        }
                        document.getElementById("dohovertree").innerHTML = "全选"

                    }

                    $("input[name='checkbox']:checkbox:checked").each(function(){
                            aa+=$(this).val();
                            num+= parseInt($(this).val())
                    })
                         $(".ceshi").html(num+'.'+'00元');
                         alert(num);
                    
                });
                //或许选择项的值
    var aa="";
    $("#btn5").click(function(){
    $("input[name='checkbox']:checkbox:checked").each(function(){
    aa+=$(this).val()
    })
    document.write(aa);
    })
    })

    //选项求和值
    $("input:checkbox").click(function(sum){
        var sum=0;
        $("input:checkbox:checked").each(function(){
        sum+= parseInt(this.value);
    });
        $(".ceshi").html(sum+'.'+'00元');
    });

    </script>
    </body>
    </html>

  • 相关阅读:
    Java web 会话技术 cookie与session
    Spring bean的bean的三种实例化方式
    Spring基础篇——通过Java注解和XML配置装配bean(转载)
    Spring的核心api和两种实例化方式
    Spring 7种事务传播类型
    leetcode 697
    leetcode 387
    Spring_002 依赖注入方式实现
    Spring_第一个Spring入门案例IOC
    谈谈对Spring IOC的理解(转载)
  • 原文地址:https://www.cnblogs.com/gerry/p/8797581.html
Copyright © 2011-2022 走看看