JQ 實現的刪除前判斷有無選中項

     之前一直在用JS實現列表刪除前的數據驗證,瞭解過JQ之後發現自己之前的代碼好多都是多餘的,真心覺得JQ的強大,強大的篩選機制,爲了方便交流,也爲了加深自己的印象,在這裏將兩者之間進行一個對比:

  

1.JS實現的驗證:

思路:將制定控件中的子控件全部獲取出來,然後逐個訪問以篩選出複選框,並根據其選中狀態給一個變量賦值,如果全部訪問晚且未發現任何選中的項則表明用戶未選擇需要刪除的項,此時直接在前臺告訴用戶操作出錯;反之,若能發現選中了數據項,則詢問用戶確認刪除後對數據進行刪除

    function Delete()
  {
     var mak=true;

    //查找所有控件
     var elem=window.form1.elements; 

    //開始循環訪問控件  
     for(i=0;i<elem.length;i++)
       {

          //根據控件類型進行篩選
           if(elem[i].type=="checkbox")
            { 
            var chkName=elem[i].id;
          
            if(chkName.indexOf("cbSelect")!=-1)
             {

               //判斷選中狀態
               if(elem[i].checked==true)
               {
                  mak = false;
                  break;
               }
              }
              
            }
        }

       //如果未選中則向用戶報錯
        if(mak==true)
        {
          alert("Please choose one")
           return false
        }
        else
        {

       //向用戶確認刪除
        var ks = window.confirm("Confirm Delete?");
        if(!ks)
        {
          return false
        }
        }
        return true
  }

2.JQ的驗證:

思路:具體思路其實跟JS一樣,只不過強大的JQ幫我們完成了很多,比如需要用循環實現的篩選,比如判斷等等,在JQ這裏只需要加上你想篩選的條件即可,然後我們根據篩選出來的空間集合的長度便能知道用戶是否選擇過數據項

首先我們篩選出所有的input控件,然後根據ID進行篩選,只要ID是以cbSelect結尾的控件都滿足要求,當然,這個條件可能只適用於我的例子,你還可以使用id^=**(id以**開頭)、name!=***(name不以***開頭)等等進行篩選,總之JQ能根據你的條件篩選出你要的結果。之前說到了篩選出列表中所有的複選框,最後的篩選便是找出那些被選中的項了。通過屬性checked='checked'便能輕易獲得那些控件,最後我們調用length獲得這些控件的個數,如果是0,當然就說明用戶未選中任意項了,一下的思路就跟JS一樣了。

總之,JQ真的是非常方便的,有些事情只需要一個屬性或一個函數就能輕鬆搞定,而且JQ還能與混用,因爲JQ本身就是JS出來的!

 function JS_Delete()
  {
        var count=$("input[id$='cbSelect'][checked='checked']").length
        if(count==0)
        {
            alert('Please Select One');
            return false;
        }
        else if(window.confirm("Continue to delete?")!=true)
        {
            return false;
        }
        else
            return true; 
  }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章