CheckBox为CheckBoxList实现全选或全取消选择

某一个时候，CheckBoxList的选择太多，用户需要一个全选或全取消的功能。下面Insus.NET使用Javascript来实现它。

准备好一个对象：

MusicType

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;



/// <summary>

/// Summary description for MusicType

/// </summary>

namespace Insus.NET

{

    public class MusicType

    {

        private int _ID;

        private string _TypeName;



        public int ID

        {

            get { return _ID; }

            set { _ID = value; }

        }

        public string TypeName

        {

            get { return _TypeName; }

            set { _TypeName = value; }

        }



        public MusicType()

        {

            //

            // TODO: Add constructor logic here

            //

        }



        public MusicType(int id, string typeName)

        {

            this._ID = id;

            this._TypeName = typeName;

        }        

    }

}

填充对象：

View Code

 public List<MusicType> GetMusicType()

    {

        List<MusicType> mt = new List<MusicType>();



        mt.Add(new MusicType(1, "甜密情歌"));

        mt.Add(new MusicType(2, "网络红歌"));

        mt.Add(new MusicType(3, "儿童歌曲"));

        mt.Add(new MusicType(4, "民族精选"));

        mt.Add(new MusicType(5, "校园歌曲"));

        mt.Add(new MusicType(6, "摇滚音乐"));

        mt.Add(new MusicType(7, "胎教音乐"));

        mt.Add(new MusicType(8, "红色名曲"));

        mt.Add(new MusicType(9, "串烧金曲"));

        mt.Add(new MusicType(10, "动慢歌曲"));

        return mt;

    }

在站点建一个aspx网页，并拉两个控件，一个是CheckBox和CheckBoxList:

View Code

全选<asp:CheckBox ID="CheckBoxAll" runat="server" onClick="javascript:Check_Uncheck_All(this);" /><br />

            <asp:CheckBoxList ID="CheckBoxListMusicType" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" Width="300"></asp:CheckBoxList>

接下来，我们为CheckBoxList绑定数据：

View Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Insus.NET;



public partial class Default2 : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

            Data_Binding();

    }



    private void Data_Binding()

    {

        this.CheckBoxListMusicType.DataSource = GetMusicType();

        this.CheckBoxListMusicType.DataTextField = "TypeName";

        this.CheckBoxListMusicType.DataValueField = "ID";

        this.CheckBoxListMusicType.DataBind ();

    }   

}

最后是写Javascript代码：

View Code

 <script type="text/javascript">

        function Check_Uncheck_All(cb) {

            var cbl = document.getElementById("<%=CheckBoxListMusicType.ClientID%>");

            var input = cbl.getElementsByTagName("input");



            if (cb.checked) {

                for (var i = 0; i < input.length; i++) {

                    input[i].checked = true;

                }

            }

            else {

                for (var i = 0; i < input.length; i++) {

                    input[i].checked = false;

                }

            }            

        }

    </script>

ok完成，看看效果：