FineUI 官方论坛

标题: CheckBoxList实现单选功能 [打印本页]

作者: Moongg    时间: 2015-12-24 09:42
标题: CheckBoxList实现单选功能
效果

[attach]8361[/attach]

代码
  1. <body>
  2.     <form id="form1" runat="server">
  3.         <x:PageManager ID="PageManager1" runat="server"></x:PageManager>
  4.         <x:CheckBoxList ID="rblVertical" Label="列表四(竖排)" ColumnNumber="3" ColumnVertical="true"
  5.             runat="server" ShowRedStar="true" Required="true">
  6.             <x:CheckItem Text="可选项 1" Value="value1" />
  7.             <x:CheckItem Text="可选项 2" Value="value2" />
  8.             <x:CheckItem Text="可选项 3" Value="value3" />
  9.             <x:CheckItem Text="可选项 4" Value="value4" />
  10.             <x:CheckItem Text="可选项 5" Value="value5" />
  11.             <x:CheckItem Text="可选项 6" Value="value6" />
  12.             <x:CheckItem Text="可选项 7" Value="value7" />
  13.             <x:CheckItem Text="可选项 8" Value="value8" />
  14.         </x:CheckBoxList>

  15.     </form>
  16. </body>
  17. </html>
  18. <script>
  19.     var rblVerticalClent = '<%=rblVertical.ClientID%>';
  20.     F.ready(function () {
  21.         var ss = F(rblVerticalClent);

  22.         ss.addListener('change', listenChecked); //为checkbox加上监听


  23.         function listenChecked(t, newV, oldV) {
  24.             ss.removeListener('change', listenChecked); //去除监听,不然后面的赋值会多次触发这个

  25.             //全部变成不选,利用这个也可以做出 全选和反选
  26.             var array = ss.items;            
  27.             array.each(function (item) {
  28.                 item.setValue(false);
  29.             });
  30.             

  31.             //取最新的指 减去 已选的值
  32.             var Newlast = new Array();
  33.             for (var i in newV) {
  34.                 var isin = false;
  35.                 if (newV[i] === oldV[i]) {
  36.                     isin = true;
  37.                 }

  38.                 if (false === isin) {
  39.                     Newlast[i] = newV[i];
  40.                 }
  41.             }

  42.             ss.setValue(Newlast); //赋值
  43.             ss.addListener('change', listenChecked); //重新加上监听
  44.         }
  45.     });


  46. </script>
复制代码



作者: TrlFineUI    时间: 2017-6-27 09:15
后台怎么获取选中的Value值呢?
作者: sanshi    时间: 2017-6-27 09:58
TrlFineUI 发表于 2017-6-27 09:15
后台怎么获取选中的Value值呢?

这个只是前台的控制,后台该咋获取还是一样。

这个帖子好老了,后来专业版示例也增加了类似的功能:http://fineui.com/demo_pro/#/dem ... kboxlist_radio.aspx




欢迎光临 FineUI 官方论坛 (https://fineui.com/BBS/) Powered by Discuz! X3.4