zoukankan      html  css  js  c++  java
  • JS HTML 可实现批量复选,批量删除 (代码直接使用)

    代码:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script src="jquery-1.10.2.min.js"></script>
    </head><script type="text/javascript">
    $(function() {
            var aFruit=document.getElementsByName("checkfruit");
            var oSelectAll=document.getElementById("selectAll");
            var oP=document.getElementById("content");
            var str="";
            //全选/全不选
            oSelectAll.onchange=function() {
                if(this.checked) {
                    for(var i=0;i<aFruit.length;i++) {
                        aFruit[i].checked=true;
                        str+=aFruit[i].value+" ";
                    }
                    oP.innerText="你选择的瓜是:"+str;
                }else {
                    for(var i=0;i<aFruit.length;i++) {
                        aFruit[i].checked=false;
                    }
                    oP.innerText="你没有选择任何瓜";
                    str="";
                }
            }
            //单个点击复选框
            var str1="";
            for(var i=0;i<aFruit.length;i++) {
                aFruit[i].onchange=function() {
                    if(this.checked) {
                        str1=str1+this.value+" ";
                    }else {
                        str1=str1.replace(this.value,"");
                    }
                    oP.innerText="你选择的瓜是:"+str1;
                }
            }
        });
    </script>
    <body>
        <div>
            <label><input type="checkbox" id="selectAll"/>全选/全不选:</label><br /><br />
            <label><input type="checkbox" name="checkfruit" value="冬瓜"/>冬瓜</label>
            <label><input type="checkbox" name="checkfruit" value="南瓜"/>南瓜</label>
            <label><input type="checkbox" name="checkfruit" value="西瓜"/>西瓜</label>
            <label><input type="checkbox" name="checkfruit" value="北瓜"/>北瓜</label>
        </div>
        <p id="content"></p>
    </body>
    </html>
  • 相关阅读:
    【流水账】2021-06-19 Day-09
    【流水账】2021-06-18 Day-08
    【流水账】2021-06-16 Day-06
    【流水账】2021-06-15 Day-05
    .Net调用Java的实现方法
    优先队列的实例题
    栈的相关程序题
    重载函数
    卡特兰数
    关于全排列的递归
  • 原文地址:https://www.cnblogs.com/smartisn/p/12892433.html
Copyright © 2011-2022 走看看