Ext.Net CheckboxGroup实现单选

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

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

文章标签：

本文介绍了一种通过自定义JavaScript脚本来实现ExtJS中CheckboxGroup控件的单选功能的方法。具体步骤包括：首先在前台设置CheckboxGroup及各复选框，并为每个复选框配置点击事件；其次，在后台通过JavaScript编写检查函数，该函数用于控制当某个选项被选中时，其他所有选项自动取消选择。

摘要生成于 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>