DevExpress でのチェックボックス（ASPxCheckBox）情報取得（JavaScript）のサンプルです。
現状の画面デザインはこのようになっています。
＜チェックボックス情報取得（JavaScript）＞
・全「ASPxCheckBox」の「CheckedChanged」に対して「ClickGetSelected(s, e);」を設定します。
※「ClickGetSelected」はローカルメソッド名です。
↓
・「GetValue()」、「GetText()」を使用してチェックボックス情報取得を行います。
GetValue：チェック「ON/OFF」情報取得
GetText：チェック名称取得
【サンプルプログラム】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<script type="text/javascript"> function ClickGetSelected(s, e) { if (s.GetValue() == false) { alert('「' + s.GetText() + '」を解除'); } } </script> <form id="form1" runat="server"> <div> <dx:ASPxCheckBox ID="ASPxCheckBox1" runat="server" Text="兵庫県" Theme="RedWine" Checked="True" CheckState="Checked" Font-Size="X-Large" ForeColor="#CC3399" Height="100px" TextSpacing="50px" Width="250px"> <ClientSideEvents CheckedChanged="function(s, e) { ClickGetSelected(s, e); }" /> <Border BorderColor="#3399FF" BorderWidth="5px" BorderStyle="Dotted" /> </dx:ASPxCheckBox> <dx:ASPxCheckBox ID="ASPxCheckBox2" runat="server" Text="京都府" Theme="RedWine" Checked="True" CheckState="Checked" Font-Size="X-Large" ForeColor="#CC3399" Height="100px" TextSpacing="50px" Width="250px"> <ClientSideEvents CheckedChanged="function(s, e) { ClickGetSelected(s, e); }" /> <BorderLeft BorderColor="#3399FF" BorderStyle="Dotted" BorderWidth="5px" /> <BorderRight BorderColor="#3399FF" BorderStyle="Dotted" BorderWidth="5px" /> </dx:ASPxCheckBox> <dx:ASPxCheckBox ID="ASPxCheckBox3" runat="server" Text="大阪府" Theme="RedWine" Checked="True" CheckState="Checked" Font-Size="X-Large" ForeColor="#CC3399" Height="100px" TextSpacing="50px" Width="250px"> <ClientSideEvents CheckedChanged="function(s, e) { ClickGetSelected(s, e); }" /> <Border BorderColor="#3399FF" BorderWidth="5px" BorderStyle="Dotted" /> </dx:ASPxCheckBox> </div> </form> |
それでは、実行して動作確認を行います。
↓
「大阪府」を選択解除します。
無事にチェックボックス情報取得（JavaScript）が出来ました。
- 投稿タグ
- ASPxCheckBox, JavaScript
