5 Replies Latest reply on Aug 25, 2009 11:26 AM by Flex harUI

    how to group check boxes..like radio buttons

    nagasreekrishna Level 1

      we have radio button group like that i need checkbox group..i have 4 checkboxes and the user must be able to select one and only checkbox at a time..how to do that..plzzz help asap.In radio buttons we have group name..but the check box dont have how to achive this feature

        • 1. Re: how to group check boxes..like radio buttons
          Flex harUI Adobe Employee

          Try using the CheckBox Skins for that set of RadioButtons

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: how to group check boxes..like radio buttons
            nagasreekrishna Level 1

            could you please tell me how to apply check box skin for radio buttons in the radiobutton group

            • 3. Re: how to group check boxes..like radio buttons
              msakrejda Level 4

              You may want to rethink this--users will probably not expect this behavior. User interface conventions are important.

               

              That said, if you still want to do this, listen for the click event and do something like this:

               

              <?xml version="1.0"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

                  <mx:Script>
                      <![CDATA[

                         private function uncheckOthers(e:Event):void
                         {
                             for each (var cb:CheckBox in [ cb1, cb2, cb3, cb4 ])
                             {
                                 if (cb != e.target)
                                 {
                                      cb.selected = false;
                                 }
                             }
                         }
                          
                      ]]>
                  </mx:Script>

                      <mx:VBox>
                          <mx:CheckBox id="cb1" label="cb1" click="uncheckOthers(event)"/>
                          <mx:CheckBox id="cb2" label="cb2" click="uncheckOthers(event)"/>
                          <mx:CheckBox id="cb3" label="cb3" click="uncheckOthers(event)"/>
                          <mx:CheckBox id="cb4" label="cb4" click="uncheckOthers(event)"/>
                      </mx:VBox>

              </mx:Application>
              • 4. Re: how to group check boxes..like radio buttons
                Zolotoj Level 3

                Here is my checkBoxGroup:

                package modulecode
                {
                     import flash.events.Event;
                     import mx.containers.HBox;
                     import spark.components.CheckBox;
                
                     public class checkBoxGroup extends HBox
                     {
                          public var checkBoxNumber:int = 0;
                          private var chkBox:CheckBox;
                          private var _dataProvider:Object;
                          public function checkBoxGroup()
                          {
                               super();
                          }
                          override protected function createChildren():void
                          {
                               // add as many checkboxes as developer has set via checkBoxNumber
                               for (var i:int=0;i<checkBoxNumber;i++)
                               {
                                    chkBox = new CheckBox();
                                    chkBox.name = i.toString();
                                    chkBox.addEventListener("change", onClick);
                                    addChild(chkBox);
                               }     
                               validateNow();
                          }
                          public function set dataProvider(dataObj:Object):void
                          {
                               _dataProvider = dataObj;
                               for (var i:int=0;i<checkBoxNumber;i++)
                               {
                                    CheckBox(getChildAt(i)).selected = Boolean(Number(dataObj[i].selected)); 
                                    CheckBox(getChildAt(i)).label = dataObj[i].label.toString(); 
                               }
                          }
                          public function get dataProvider():Object
                          {
                               return _dataProvider;
                          }
                          //called by click of the checkbox
                          private function onClick(event:Event):void
                          {               
                                //set the checkbox state into the dataProvider
                                dataProvider[Number(event.target.name)].selected = String(event.target.selected);          
                          }      
                     }
                }
                

                • 5. Re: how to group check boxes..like radio buttons
                  Flex harUI Adobe Employee

                  .CheckBoxRadioButton

                   

                   

                  <mx:RadioButton styleName="CheckBoxRadioButton" />

                   

                   

                  However, I agree with whoever said that this is going to be an unexpected UI.   Most folks don't expect checkboxes to be mutually exclusive.

                   

                  Alex Harui

                  Flex SDK Developer

                  Adobe Systems Inc.

                  Blog: http://blogs.adobe.com/aharui