There Should be two Asp.Net Controls one is CheckListBox which contains colors and another should be ListBox control. Both Boxes have 2 Html buttons.
2.UnCheck All(Uc All ) 2.Add Selected(Ad Sel)
After Designing writes all the server side coding in Javascript.(Total coding should be in Javascript.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ColorAdd.aspx.cs" Inherits="ColorAdd" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script runat="server">
// private void btnCheckAll(object sender,e)
</script>
<style type="text/css">
.auto-style1 {
width: 339px;
}
.auto-style2 {
width: 292px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr> <td class="auto-style1">
<asp:Label ID="Label1" runat="server" Text="Select Your Favorite Color:" BackColor="#FFFFCC" BorderColor="#FF0066" ForeColor="Red"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style1"> <asp:CheckBoxList
ID="CheckBoxList1" runat="server" Font-Italic="true" Font-Names="Courier New"
Font-Size="X-Large" Height="245px" Width="341px" BackColor="Yellow" CssClass="cbl"
OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged" AutoPostBack="True">
<asp:ListItem Value="s1" Text="Red"/>
<asp:ListItem Value="s2" Text="Green"/>
<asp:ListItem Value="s3" Text="Blue"/>
<asp:ListItem Value="s4" Text="Black"/>
<asp:ListItem Value="s5" Text="Pink"/>
<asp:ListItem Value="s6" Text="Purple"/>
<asp:ListItem Value="s7" Text="Brown"/>
<asp:ListItem Value="s8" Text="Cyan"/>
<asp:ListItem Value="s9" Text="Gray"/>
<asp:ListItem Value="s10" Text="LawnGreen"/>
</asp:CheckBoxList></td>
<td class="auto-style2">
<asp:ListBox ID="ListBox1" SelectionMode="Multiple" runat="server" Height="284px" Width="235px"
OnSelectedIndexChanged="ListBox1_SelectedIndexChanged" style="margin-left: 37px">
</asp:ListBox>
</td>
</tr>
<tr>
<td class="auto-style1">
<input id="BtnCheckAll" style="font-size: large; color: #800000" type="button" value="Check All" />
<input id="BtnUnCheckAll" style="font-size: large; color: #800000" type="button" value="UnCheck All"/>
</td>
<td class="auto-style2">
<input id="BtnAddAll" style="font-size: large; color: #800000; width: 83px; margin-left: 7px;" type="button" value="Add All" />
<input id="BtnAddSelected" style="font-size: large; color: #800000; margin-left: 28px;" type="button" value="Add Selected"/>
</td>
</tr>
</table>
</form>
</body>
</html>