DataList & Jquery 分頁功能與全選 checkbox , PART 2

July 20, 2011 0 Comments

接下來討論怎麼利用前端Jquery去接使用者select all 和判斷哪個checkbox被選擇 ,在程式中我利用class的方式去判別需要用到的control:

  1. 首先加入Jquery和需要用到的Javascript:

  2. $(window).bind('load', function() {
    //全選的Button
    var headerChk = $(".chkHeader");
    //datalist 中的 checkbox
    var itemChk = $(".checkItem input");
    headerChk.bind("click", function() {
    itemChk.each(function() {
    this.checked = true;
    })
    });
    itemChk.bind("click", function() {
    if ($(this).checked == false) {
    //這邊放uncheck
    }
    });
    });
    //撈使用者勾選的項目並處理
    function SendToSMS() {
    var itemChk = $(".checkItem input[type=checkbox]:checked");
    var SMSstr = '';
    //每個選擇的項目
    itemChk.each(function() {

    var LB = $(this).attr('id');
    LB = LB.replace('CheckBox1', 'Label2');
    SMSstr += ',' + document.getElementById(LB).innerText;
    })
    if (SMSstr.length > 0) {alert(SMSstr);}

    }
  3. 然後在.aspx頁面中的Datalist:
  4.  














0 comments: