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>

  • 相关阅读:
    读书
    Web前端知识体系精简
    让你分分钟理解 JavaScript 闭包
    常用 Git 命令使用教程
    js库写法
    Gitlab的使用
    appium-环境搭建(一)
    Selenium-几种等待方式
    Selenium-免登录的实现
    Selenium-百度登录简单例子
  • 原文地址:https://www.cnblogs.com/gerry/p/8797581.html
Copyright © 2011-2022 走看看