Heim > Artikel > Web-Frontend > JavaScript prüft die Anzahl und den Wert ausgewählter Werte in einer Checkbox

JavaScript prüft die Anzahl und den Wert ausgewählter Werte in einer Checkbox

高洛峰Original: 2016-11-25 14:22:531153Durchsuche

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>JavaScript检查复选框选中的值个数及值</title> 
</head> 
 
<body> 
    <script language="javascript"> 
        var i = 0; 
        for (;i<20;i++) { 
            document.write(&#39;<input type="checkbox" name="ck" value="&#39;+i+&#39;" /><br />&#39;); 
        } 
        document.write(&#39;<br /><input type="button" id="ckall" name="ckall" value="全选" onclick="checkall();" /> <input type="button" name="delall" value="删除所选" id="delall" />&#39;); 
        document.write(&#39;<br />  <label id="text" style="display:none;"></label>&#39;); 
        // 是否全选复选框函数 
        function checkall() { 
            var ckall = document.getElementById("ckall"); // 全选按钮对象 
            var ck = document.getElementsByName("ck"); // 复选框对象 
            // 当要执行全选时 
            if (ckall.value=="全选") { 
                var j = 0; 
                // 循环把复选框选中 
                for (;j<20;j++) { 
                    ck[j].checked = "true"; 
                } 
                ckall.value="全不选"; 
            } else if (ckall.value=="全不选") { 
                // 当要执行全选时 
                document.getElementById("delall").disabled=false;   // 去掉delall按钮的disabled 
                document.getElementById("delall").value="删除所选"; // 修改elall按钮的value为“删除所选” 
                document.getElementById("text").style.display="none"; // 设置 text 为隐藏 
                // 循环设置全不选 
                for (j=0;j<20;j++) { 
                    ck[j].checked = null; 
                } 
                ckall.value="全选"; 
            } 
        } 
        var delall = document.getElementById("delall"); 
        // 点击删除按钮执行下面函数 
        delall.onclick=function(){ 
            var arr = Array();  // arr为数组 
            var ck = document.getElementsByName("ck"); 
            for (i=0;i<20;i++) { 
                if (ck[i].checked) { 
                    arr.push(ck[i].value);  // 当复选框选中中将选中的值累加到arr这个数组中 
                } 
            } 
            // 判断arr数组的个数，如果为0，那么就是没有选中，弹出警告信息 
            if (arr.length==0) { 
                alert(&#39;请先选中数据！&#39;);    
            } else if (arr.length>0){ 
                // 下面是执行删除动作 
                delall.disabled=true; // 设置delall按钮为不可点 
                delall.value="正在删除..."; // 设置delall按钮的value为“正在删除...” 
                var text = document.getElementById("text"); 
                text.style.display="block";   // 显示 text 
                text.style.fontSize = &#39;12px&#39;; // 设置字体大小 
                var t = "删除数据为：";         // t 为text要显示的内容 
                for (j=0;j<arr.length;j++) { 
                    t += arr[j]+" "; 
                }  www.2cto.com
                text.innerHTML = t; 
            } 
        } 
    </script> 
     
</body> 
</html>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Grundlegende Methoden zur String-Verkettung und SegmentierungNächster Artikel：Grundlegende Methoden zur String-Verkettung und Segmentierung

In Verbindung stehende Artikel

Mehr sehen