限定checkbox最多選中數量

時間 2019-11-12

原文原文鏈接

1、概述：javascript

　　checkbox是咱們在編寫網頁的時候常用的多選框，可是有些時候咱們會限定最多選中的數量，如何限定呢？html

　　下面這例子限定了最多選中兩個元素，而且將這兩個選中的源依次顯示在一個文本框裏：java

<!DOCTYPE HTML >
<HTML>
 <HEAD>
  <TITLE> by失落沙洲 </TITLE>
 </HEAD>
 <style>
    #xianshi{
        height:30px;
        width:200px;
        border:1px solid black;
    }
 </style>
 <BODY>
    <div id="xianshi"></div>
    <div id="d1">
        <input type="checkbox" name="tianqi" value="下雨" onclick="check_count(this)" >下雨
        <input type="checkbox" name="tianqi" value="下雪" onclick="check_count(this)" >下雪
        <input type="checkbox" name="tianqi" value="打雷" onclick="check_count(this)" >打雷
        <input type="checkbox" name="tianqi" value="閃電" onclick="check_count(this)" >閃電
        <input type="checkbox" name="tianqi" value="颱風" onclick="check_count(this)" >颱風
        <input type="checkbox" name="tianqi" value="晴天" onclick="check_count(this)" >晴天
    </div>
 <script type="text/javascript" src="jquery-1.11.3.js"></script>
 <script type="text/javascript">
     var opts = new Array(); //定義一個空數組
        function check_count(_obj) {
            if ($(":checkbox[name='tianqi']:checked").length >= 0) {//找到name爲天氣的多選框 若是被選中的checkbox 長度大於0
                opts.push($(":checkbox[name='tianqi']").index($(_obj)));//將這個元素壓入到opts數組中
                var val=$(_obj).val();//獲取當前被選中的值
                var html="";//定義一個空字符串
                html+="<span>"+val+"</span>"//將被選中的值 拼在span標籤內 而且傳入html中
                if(_obj.checked){//判斷 若是當前元素被選中
                    $(html).appendTo("#xianshi");/* 將拼好的html元素插入到 顯示框內
                                                    注意html 如今是這樣的 <span>天氣名稱</span>
                                                    穿到html頁面是這種的
                                                    <div id="#xianshi">
                                                        <span>當前選中的天氣名稱</span>
                                                        <span>第二次選中的天氣名稱</span>
                                                        <span>第三次選中的天氣名稱</span>
                                                    </div>
                                                    下面會有限制條件
                                                    */

                }else{
                    $("#xianshi").innerHTML='';//若是沒有被選中顯示框爲空
                }
            }
            if (opts.length >2) {//若是當前數組長度大於2時，這裏就是斷定你選中了多少個checkbox
                $($(":checkbox[name='tianqi']").get(opts.shift())).attr("checked", false);/*將你第一個選中的 check值設爲false
                                                                                            注：checked 值有兩個true爲選中
                                                                                                              false爲未選中*/
                $("#xianshi").children("span:eq(0)").remove();/*找到#xiashi框，查找他下面的第一個span標籤
                                                                eq(0)是span標籤的下標，0是第一個 1是第二個 
                                                                排序方式跟數組相同的應該比較好理解
                                                                remove()是移除函數
                                                                也就是將你插入到#xianshi下的第一個span標籤移除
                                                                這樣就按照順序顯示了
                                                                */
            }
            
        }
 </script>
 </BODY>
</HTML>