Ext.Net CheckboxGroup实现单选

最新推荐文章于 2024-09-06 22:33:47 发布

转载最新推荐文章于 2024-09-06 22:33:47 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/easypass/archive/2011/08/25/2153624.html

文章标签：

#javascript #ViewUI

本文介绍如何使用ExtJS中的CheckboxGroup组件实现单选功能。通过自定义JavaScript脚本来控制CheckboxGroup内的复选框状态，确保同一时间内只能选择一个选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　由于默认情况下CheckboxGroup支持多选但不支持多选，可以通过手动处理完成。

一、前台

   <ext:CheckboxGroup  ID="ChkGrp"  runat="server"  Width="350" ColumnsNumber="4" >
                    <Items>
                        <ext:Checkbox ID="ydmxk" runat="server" BoxLabel="很满意" Checked="false">
                           <Listeners>
                              <Check Handler="Check(ChkGrp,0)" />
                           </Listeners>
                        </ext:Checkbox>
                        <ext:Checkbox ID="gzhmxk" runat="server" BoxLabel="满意" Checked="false">
                         <Listeners>
                              <Check Handler="Check(ChkGrp,1)" />
                           </Listeners>
                        </ext:Checkbox>
                        <ext:Checkbox ID="tshmxk" runat="server" BoxLabel="基本满意" Checked="false">
                         <Listeners>
                              <Check Handler="Check(ChkGrp,2)" />
                           </Listeners>
                        </ext:Checkbox>
                        <ext:Checkbox ID="wdmxk" runat="server" BoxLabel="不满意" Checked="false">
                         <Listeners>
                              <Check Handler="Check(ChkGrp,3)" />
                           </Listeners>
                        </ext:Checkbox>
                    </Items>
                </ext:CheckboxGroup>

二、javascript脚本

 <script type="text/javascript" language="javascript">
        function Check(ChkGrp, index) {
            if (ChkGrp.items.itemAt(index).checked) {
                for (var i = 0; i < ChkGrp.items.length; i++) {
                    if (i != index) {
                        if (ChkGrp.items.itemAt(i).checked) {
                            var id = ChkGrp.items.itemAt(i).id;
                            ChkGrp.setValue(id, false)
                        }
                    }
                }
            }
        }
    </script>

转载于:https://www.cnblogs.com/easypass/archive/2011/08/25/2153624.html